[Résolu] CSS3 Sélectionner une balise qui en suit une autre ?

Statut : non résolu

Ce sujet contient 9 réponses, 2 participants et a été mis à jour pour la dernière fois par Guy, le il y a 12 années et 6 mois.

10 sujets de 1 à 10 (sur un total de 10)

Auteur

Messages
11 juillet 2012 à 21 h 09 min #512012
luciole135
Participant

Maître WordPress
13714 contributions
Bonjour,

Ma configuration WP actuelle
– Version de WordPress :
– Version de PHP/MySQL :
– Thème utilisé :
– Extensions en place :
– Nom de l’hebergeur :
– Adresse du site :

Problème(s) rencontré(s) :

En buchant les cours de CSS3 de l’excellent site du zéro, j’ai appris que l’on pouvait sélectionner une balise qui en suit une autre.
Cela m’intéresse pour la présentation de tous mes tableaux dans les pages.
Je voudrais que :
– la première colonne (appelée MARQUE) dans les tableaux des additifs soit alignée à gauche et que toutes les autres soit centrées.
J’ai donc ajouté cette règle :
```
#content tr td {
	border: 1px solid black;
	padding: 1px 1px 1px;
	text-align: center;
	vertical-align:middle;
}
	
#content tr+td {    
	text-align: left;
	border: 1px solid black;
}
```
comme indiqué dans cette partie du cours : A + B : une balise qui en suit une autre, donc normalement cela devrais sélectionner la première colonne des tableaux et aligner le texte à gauche.

Mais cela ne fonctionne pas, où est-ce que je foire quelque chose ?

Merci de vos lumières.
11 juillet 2012 à 21 h 10 min #842659

luciole135
Participant

Maître WordPress
13714 contributions

Oups, j’ai oublié la config :
Ma configuration WP actuelle :

– Version de WordPress : 3.4.1
– Version de PHP/MySQL : 5.1.3RC4-dev / 5.0.83
– Thème utilisé : Twenty Ten Daily-Good
– Extensions en place : Cimy Counter (1.1.1), Clean UP (3.00), Cookies for Comments (0.5.4), Forum_wordpress_fr (3.1), WP-Memory-Usage (1.2.1), WP-Optimize (0.9.4)
– Adresse du site : http://additifstabac.free.fr/test
– Nom de l’hébergeur : Apache/ProXad [Apr 20 2012 15:06:13]

11 juillet 2012 à 22 h 51 min #842660
Guy
Participant

Maître WordPress
14817 contributions
cela ne marche pas parce que la balise
ne suit pas la balise
, c’est une balise enfant. Le signe + s’applique sur des balises qui se suivent et de même niveau.

Tu as donc deux possibilités pour faire cela:

La première:
tous les
sont alignés à gauche sauf si ils ont un autre sur leur gauche (centré en ce cas).
```
#content tr td {
    border: 1px solid black;
    padding: 1px 1px 1px;
    text-align: left;
    vertical-align:middle;
}
    
#content td + td {    
    text-align: center;
    border: 1px solid black;
}
```
La seconde:
Le texte de tous les est centré, on aligne à gauche le texte du premier imbriqué dans un
.
```
#content tr td {
    border: 1px solid black;
    padding: 1px 1px 1px;
    text-align: center;
    vertical-align:middle;
}
    
#content tr td:first-child {    
    text-align: left;
    border: 1px solid black;
}
```
Remarque, comme tous les sélecteurs css3, la compatibilité sur tous les navigateurs n’est pas assurée.
12 juillet 2012 à 5 h 13 min #842661

luciole135
Participant

Maître WordPress
13714 contributions

Whao ! Cela s’appelle du génie ! 👏

Milles merci 🍺

Du coup, je peux utiliser certainement le principe du first-child pour écrire en gras une autre colonne :
– celle appelée « additifs totaux » (la 6ème dans les tableaux des cigarettes, la quatrième dans les autres), je vais certainement utiliser une id pour distinguer le tableau des additifs des cigarettes des 3 autres.

Si tous les navigateurs ne sont pas compatibles, ce n’est pas grave au pire tout sera centré, donc reste encore parfaitement lisible !

✅

12 juillet 2012 à 5 h 35 min #842662

Guy
Participant

Maître WordPress
14817 contributions

si tu veux cibler un élément « enfant » particulier, tu peux te servir de nth-child(x), où x est l’indice de l’élément.
first-child est équivalent à nth-child(1). Ce sélecteur permet également par exemple de ne cibler qu’un élément sur 2 ou les 4 premiers ou …. , il y a pas mal de combinaisons, je t’invite à les regarder, c’est intéressant.

Les navigateurs qui ne prennent pas en compte ces propriétés sont, comme souvent, les versions d’IE inférieures à 9. Il existe des hacks permettant cette compatibilité si elle est absolument nécessaire.

12 juillet 2012 à 6 h 06 min #842663

luciole135
Participant

Maître WordPress
13714 contributions

Guy wrote:

si tu veux cibler un élément « enfant » particulier, tu peux te servir de nth-child(x), où x est l’indice de l’élément.
first-child est équivalent à nth-child(1). Ce sélecteur permet également par exemple de ne cibler qu’un élément sur 2 ou les 4 premiers ou …. , il y a pas mal de combinaisons, je t’invite à les regarder, c’est intéressant.

Les navigateurs qui ne prennent pas en compte ces propriétés sont, comme souvent, les versions d’IE inférieures à 9. Il existe des hacks permettant cette compatibilité si elle est absolument nécessaire.

Je vais chercher tout ça,
Bon j’ai trouvé 2 références :
– ce site :
http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre
– et toujours le site du zéro qui explique de façon encore plus détaillée :
http://www.siteduzero.com/tutoriel-3-548978-ciblons-nos-elements.html

En buchant, on découvre des propriétés insoupsonnées et donc on peut grandement améliorer l’affichage et la orésentation du site.

Après m’être pendant 2 ans préoccupé uniquement du contenu du site, je vais maintenant m’occuper aussi du contenant !

Milles merci :wp: 👏

12 juillet 2012 à 22 h 15 min #842664

luciole135
Participant

Maître WordPress
13714 contributions

Ca y est j’ai réussi pour le tableaux des additifs des cigarettes manufacturées 🍺
CIGARETTES MANUFACTUREES : Pourcentage d’additifs et taux de nicotine, goudrons, monoxyde de carbone (CO)

Maintenant je dois faire encore mieux, je dois mettre une id dans les tableaux des tabacs à rouler, des cigares et des tabacs à pipe (car les % d’additifs sont dans ce cas à la 4ème colonne) pour faire de même dans ces tableaux.

Mille merci !

👏

13 juillet 2012 à 6 h 12 min #842665
luciole135
Participant

Maître WordPress
13714 contributions
Ca y est, j’ai réussi à mettre en gras la 4ème colonne des autres tableaux. J’ai mis dans chaque balise <table des tableaux la class="tabac" avec cette class définie dans le CSS enfant par :
```
#content .tabac tr td:nth-child(4)
{
    font-weight: bold;
}
```
Et ça marche.

👏
13 juillet 2012 à 9 h 45 min #842666

luciole135
Participant

Maître WordPress
13714 contributions

✅ grâce au génie de Guy 🍺

Voir Ne pas hériter du thème parent d’une balise <p suivie d'une class ?!

13 juillet 2012 à 9 h 47 min #842667

Guy
Participant

Maître WordPress
14817 contributions

lol …. je met résolu , à t’entendre j’aurai presque inventé html5 et css3 🙂
Auteur

Messages