{"id":1577,"date":"2011-11-17T08:56:11","date_gmt":"2011-11-17T07:56:11","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1577"},"modified":"2015-01-18T16:21:08","modified_gmt":"2015-01-18T15:21:08","slug":"selecteur-dadjacence-indirecte-en-css3","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/selecteur-dadjacence-indirecte-en-css3","title":{"rendered":"S\u00e9lecteur d’adjacence indirecte en CSS3"},"content":{"rendered":"

Le s\u00e9lecteur d’adjacence indirecte est peu connu en CSS<\/abbr>.
\nArriv\u00e9 avec la nouvelle mouture CSS3<\/abbr>, ce s\u00e9lecteur vous permet de s\u00e9lectionner d’un seul coup tous les fr\u00e8res d’un \u00e9l\u00e9ment cibl\u00e9 r\u00e9pondant \u00e0 un s\u00e9lecteur pr\u00e9cis.
\nVoyons voir avec quelques exemples comment l’utiliser et quels sont ses effets.<\/p>\n

Syntaxe de base<\/h2>\n

Le s\u00e9lecteur, que j’appelle incorrectement siblings<\/em> du fait de sa ressemblance avec la fonction siblings()<\/a><\/code> de jQuery, utilise le caract\u00e8re ~ disponible sous PC depuis les touches Alt Gr<\/kbd><\/kbd> + 2(\u00e9 ~)<\/kbd><\/kbd>.<\/p>\n

element1 ~ element2 {\r\n\/* mes styles *\/\r\n}<\/code><\/pre>\n
Ici les styles seront appliqu\u00e9s \u00e0 tous les element2<\/code> fr\u00e8res de element1<\/code>, m\u00eame si un autre fr\u00e8re vient se m\u00ealer entre deux element2<\/code>, par exemple.<\/p>\n
Voir la d\u00e9mo<\/a><\/p>\n
Il est important de noter que ce s\u00e9lecteur ne cible que les fr\u00e8res suivants d’un \u00e9l\u00e9ment. En aucun cas les fr\u00e8res pr\u00e9c\u00e9dents ne seront concern\u00e9s.<\/p>\n
Quelques exemples d’utilisations<\/h2>\n
En r\u00e9alit\u00e9 je n’en ai pas trouv\u00e9 tant que \u00e7a, peut-\u00eatre par habitude d’utiliser d’autres techniques.
\nG\u00e9n\u00e9ralement la technique li + li<\/code> pour cibler tous les fr\u00e8res du premier li<\/code> dans une liste, par exemple, me suffit.<\/p>\n
Cibler les fr\u00e8res non identiques \u00e0 l’\u00e9l\u00e9ment de d\u00e9part<\/h3>\n
Cependant ce s\u00e9lecteur d’adjacence indirecte (~<\/code>) va permettre de combler certaines lacunes du s\u00e9lecteur d’adjacence directe (+<\/code>).
\nIl sera capable de cibler tous les paragraphes qui suivent un titre, par exemple. Chose qui ne fonctionnera pas en faisant h3 + p<\/code>, mais qui fonctionnera avec h3 ~ p<\/code>.<\/p>\n
Cibler les fr\u00e8res d’un \u00e9l\u00e9ment survol\u00e9, cibl\u00e9 ou typ\u00e9<\/h3>\n
Dans la m\u00eame logique que pr\u00e9c\u00e9demment, il est possible de cibler, par exemple, tous les fr\u00e8res d’un li<\/code> survol\u00e9 (donc les autres li<\/code>), ou d’un input<\/code> typ\u00e9.<\/p>\n
li:hover ~ li {\r\nopacity: 0.4;\r\n}<\/code><\/pre>\n
Cet exemple provient d’un effet produit sur jq.creativejuiz.fr<\/a> (avec une solution jQuery), ou sur la r\u00e9cente d\u00e9monstration de Rapha\u00ebl Goetter sur un fil d’ariane enti\u00e8rement con\u00e7u en CSS : Breadcrumbs without images<\/a>.<\/p>\n
Ou avec le deuxi\u00e8me exemple :<\/p>\n
input[type=\"radio\"] ~ input {\r\n   margin-left: 2.6em;\r\n}<\/code><\/pre>\n
Ce qui permettrait, dans un encha\u00eenement de input + label<\/code> de type radio, d’espacer les choix.
\nD\u00e9monstration<\/a><\/p>\n
Exemple de factorisation pour les niveaux de titre<\/h3>\n
J’ai essay\u00e9 d’aller plus loin encore, avec des choses un peu pouss\u00e9es… un peu trop peut-\u00eatre.
\nJe m’explique.<\/p>\n
Je ne sais pas si la pratique est courante, mais il peut-\u00eatre int\u00e9ressant d’avoir une indentation des blocs de texte en fonction du niveau dans lequel on se trouve dans un document (pas du niveau dans le DOM<\/abbr>, mais dans la hi\u00e9rarchie des titres).
\nC’est surtout dans un contexte de forte densit\u00e9 de texte que je vois l’int\u00e9r\u00eat.
\nVoici une illustration de mon propos : voir la d\u00e9monstration<\/a>.<\/p>\n
Comme vous pouvez le voir, une marge \u00e0 gauche est appliqu\u00e9e en fonction du niveau de titre qui pr\u00e9c\u00e8de le contenu.
\nOu plut\u00f4t, en terme de CSS<\/abbr>, tout ce qui suit un niveau de titre se verra appliquer une marge en cons\u00e9quence.
\nLa marge n’est qu’un exemple parmi d’autres, on peut tr\u00e8s bien imager d’autres styles plus color\u00e9s.<\/p>\n
Vous avez le droit de vous dire que sur le web \u00e7a ne sert pas \u00e0 grand chose et qu’on cherche souvent \u00e0 avoir un contenu \u00e9pur\u00e9… soit, mais imaginons.<\/p>\n
Avant de vous donner du code, je tiens \u00e0 pr\u00e9ciser que \u00e7a ne fonctionne pas. En effet, dans le cas pr\u00e9sent, je place les uns \u00e0 la suite des autres des titres, paragraphes et listes.
\nIl n’y a donc aucune profondeur, aucun sectionnement du contenu.<\/p>\n
Voici la CSS (version pour Firefox) de l’exemple, si vous ne l’avez pas d\u00e9j\u00e0 analys\u00e9e directement dans la d\u00e9mo :<\/p>\n
.ex2 h3 {\r\n\tmargin-left: 1em;\r\n}\r\n.ex2 h3 ~ :-moz-any(p, ul, blockquote, h4) {\r\n\tmargin-left: 2em;\r\n}\r\n\t\t\t\r\n.ex2 h4 {\r\n\tmargin-left: 4em;\r\n}\r\n.ex2 h4 ~ :-moz-any(p, ul, blockquote, h5) {\r\n\tmargin-left: 5em;\r\n}\r\n\t\t\t\r\n.ex2 h5 {\r\n\tmargin-left: 7em;\r\n}\r\n.ex2 h5 ~ :-moz-any(p, ul, blockquote, h6) {\r\n\tmargin-left: 8em;\r\n}\r\n\t\t\t\r\n\/* \r\n\tpermettre de remonter dans la hi\u00e9rarchie...\r\n\tmais pas trop...\r\n*\/\r\n.ex2 h5 ~ h4 ~ :-moz-any(p, ul, blockquote, h5) {\r\n\tmargin-left: 5em;\r\n}\r\n\t\t\t\r\n.ex2 h4 ~ h3 ~ :-moz-any(p, ul, blockquote, h4) {\r\n\tmargin-left: 3em;\r\n}<\/code><\/pre>\n
Vous remarquerez l’utilisation de any()<\/code>, pseudo-classe vue pr\u00e9c\u00e9demment dans l’article \u00ab\u00a0CSS3 – Any(), pseudo-classe prometteuse et \u00e9conome<\/a>\u00ab\u00a0, qui me permet d’\u00e9conomiser quelques lignes de code.<\/p>\n
\"\"Voyez-vous o\u00f9 le probl\u00e8me se pose ?
\nEn fait, un paragraphe (ou liste) qui se trouve apr\u00e8s un h3<\/code> qui serait lui m\u00eame apr\u00e8s un h4<\/code> se verrait appliquer les styles d’un paragraphe (ou liste) se trouvant apr\u00e8s un h4<\/code>. Et oui ! Puisque dans l’absolu, ce p<\/code>, m\u00eame si pr\u00e9c\u00e9d\u00e9 d’un h3<\/code>, se trouve fr\u00e8re d’un h4<\/code>.<\/p>\n
Euh… \u00e7a va ? Je ne vous ai pas perdu ?<\/p>\n
Sinon pour information, ce s\u00e9lecteur est compatible avec IE7 et version sup\u00e9rieure, g\u00e9nial non ?<\/p>\n
C’\u00e9tait une simple r\u00e9flexion sur l’utilisation de ce s\u00e9lecteur.
\nEt vous, vous en pensez quoi ?
\nJe vous laisse me dire comment vous voyez l’utilisation de ce s\u00e9lecteur.<\/p>\n
Je rends l’antenne.
\n\u00c0 vous !<\/p>\n
\n
Liens utiles<\/h2>\n