Discussion :

[nicolas2603]

Bonjour, je sollicite votre aide afin de d'appliquer une règle CSS sur un sélecteur un peu particulier.
Imaginons ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
h2{border:1px solid black}
h1+h2{border:none}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h2>Titre 3</h2>
 
<h1>Titre 1 bis</h1>
<div>
<h2>Titre 2 bis</h2>
<h2>Titre 3 bis</h2>
</div>

L'idée est que chaque h2 est entouré d'une bordure, sauf celui qui suit directement le h1.
Comment faire pour que cela fonctionne dans le cas bis, où les h2 ne se trouvent pas directement à la suite du h1, mais se trouvent dans une div ? Est-ce possible ?
Merci d'avance.

[nicolas2603]

Et bien je réponds à ma propre question, il semblerait que ceci fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

h1+div>h2:first-child

Je ne sais pas si c'est le plus propre, mais en tout cas le résultat attendu est là !

[NoSmoking]

Bonjour,
attention tu as 2 structure différente
- H2 est frère immédiat de H1
- H2 est enfant de DIV frère immédiat de H1
Tu ne pourras donc pas traiter les deux avec un seul sélecteur

Dans le 1er cas effectivement h1 + h2 {...}, dans le 2éme cas h1 + div h2:first-child{...}, ton > est potentiellement de trop donc au final

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
h1 + h2,
h1 + div h2:first-child {
  border:none
}

Ensuite se pose les questions suivantes
- pertinence de cette structure
- les H2 ayant le même poids sémantique pourquoi les différencier

[Bovino]

Le plus pertinent à mon sens serait quand même d'affecter une classe spécifique aux h2 que tu souhaites différencier... du coup, plus besoin de sélecteur compliqué pour les cibler.

[nicolas2603]

Merci pour vos réponses.
Je suis bien d'accord que l'application d'une classe spécifique serait le plus approprié, mais dans mon cas je dois styliser du contenu que je ne génère pas moi même, mais qui est créé par de multi utilisateurs via un wysiwyg. J'avais bien prévu de paramétrer deux balises contenant les styles adéquats, mais à l'utilisation je constate que les styles ne sont pas utilisées comme il se doit. Donc pour avoir un style carré, je n'ai trouvé que cette solution !