Le CSS et l'orthographe de ses sélecteurs

Le CSS et l'orthographe de ses sélecteurs

Tags : CSS, Tutoriaux
Catégorie : Lemon Cake
Mise en ligne : 3 Novembre 2015 à 12:30

Le CSS (Cascading Style Sheets) est un langage web qui permet de rendre vos pages HTML un peu plus jolie à vos utilisateur. Dans ce tuto je vais vous (ré)appendre certaines notions quant aux sélecteurs CSS.

Avant propos

Dans ce tutoriel je vais utiliser certaines balises qui n'existe pas en HTML car ce tuto est la traduction française d'un site dont je vous donnerez le lien dans la conclusion afin que vous puissiez, une fois ce tuto terminé, aller tester vos connaissances.

Les bases

Pour sélectionner des composants HTML avec le CSS, cela se fait très simplement. Vous souhaitez par exemple sélectionner tous les paragraphes p de votre site vous avez juste à faire :

p {
    /* VOTRE CODE */
}

Pour sélectionner des balises avec des identifiants (attributs ID).

div#mon_id {
    /* VOTRE CODE */
}

ou des classes (attributs CLASS)

div.ma_classe {
    /* VOTRE CODE */
}

Si vous souhaitez sélectionner des zones spécifiques dans votre code comme par exemple la balise apple qui est dans plate :

<div>
    <bento></bento>
    <plate>
        <apple/>
    </plate>
    <apple/>
</div>

plate apple {
    /* VOTRE CODE */
}

Bien sûr vous pouvez combiner ce que l'on a vu plus haut comme ceci :

plate#mon_id apple {
    /* VOTRE CODE */
}

Vous allez sans doute être amené dans votre développement à vouloir utiliser certaines propriétés pour plusieurs classes. Vous pouvez pour cela séparer vos sélecteurs par des virgules (sans limite), comme ceci :

div#mon_id, p.ma_class, span {
    /* VOTRE CODE */
}

On rentre dans le tas

Sélectionner un élément qui suit directement un autre élément

Pour sélectionner dans votre code par exemple tous les a qui suivent un div vous pouvez utiliser le sélecteur plus :

div + a {
    /* VOTRE CODE */
}

Sélectionner les éléments qui suivent directement un autre élément

Le sélecteur suivant permet de sélectionner plusieurs éléments à la fois. Pour cela il vous faudra utiliser le tilde (ALTGR + é sous Windows) :

div ~ a {
    /* VOTRE CODE */
}

Sélectionner les enfants directs d'un élément

Pour sélectionner la balise apple qui est un enfant direct de la balise plate, il faut utiliser le sélecteur supérieur à :

<div class="table">
    <plate>
        <bento>
            <apple/>
        </bento>
    </plate>

    <plate>
        <apple/>
    </plate>

    <plate></plate>

    <apple/>
    <apple class="small"/>
</div>

plate > apple {
    /* VOTRE CODE */
}

Les pseudo-sélecteurs

Les pseudos-sélecteurs sont arrivés pour la plupart avec l'arrivé du CSS3. Grâce aux deux points suivit du sélecteur vous allez pouvoir faire des miracles dans votre code. Par exemple pour sélectionner certains enfants :

div:first-child /** Sélectionnera le premier enfant **/
div:last-child /** Sélectionnera le dernier enfant **/

div:nth-child(X) /** Sélectionnera le Xème enfant en partant du début **/
div:nth-last-child(X) /** Sélectionnera le Xème enfant en partant de la fin **/

div a:only-child /** Sélectionnera uniquement les a qui seront dans des div **/

a:first-of-type /** Sélectionnera uniquement le premier a dans tous les éléments **/
a:last-of-type /** Sélectionnera uniquement le dernier a dans les éléments **/
a:nth-of-type(X) /** Sélectionnera uniquement le Xème a dans les éléments **/
div a:only-of-type /** Sélectionnera uniquement les a dans les div uniquement s'il est le seul a dans le div parent **/

Les extras

Pour sélectionner toutes les balises, ou les balises enfants d'une autre vous pouvez utiliser le sélecteur étoile comme ceci :

* {
    /* VOTRE CODE */
}
/* OU */
div * {
    /* VOTRE CODE */
}

Le CSS est capable de compter pour vous

Il est parfois agréable de ne colorier qu'une ligne sur 2 dans un tableau par exemple, afin de gagner en visibilité, mais comment faire ? Heureusement le CSS est capable de faire des opérations arithmétique simple :

table tr:nth-child(2n+1) {
    /* VOTRE CODE */
}

Le code va remplacer n par des nombres de 0 à l'infinie et faire :

  • 2 x 0 + 1 = 1
  • 2 x 1 + 1 = 3
  • 2 x 2 + 1 = 5
  • ...

J'ai des choses à l'intérieur ?

Et oui le CSS est capable de savoir s'il a ou non des choses à l'intérieur de lui. Je m'explique. Vous souhaitez sélectionner uniquement les div vides :

div:empty {
    /* VOTRE CODE */
}

Toi je ne t'aime pas

Il peut être aussi discriminent :

div:not(.dummy) {
    /* VOTRE CODE */
}

Et on peut combiner ceci avec des pseudo-éléments à la place d'une classe, identifiant ou balise.

Pour aller plus loin

Vous pouvez aussi styliser des attributs bien spécifiques.

Placeholder

Comme par exemple les attributs placeholder des input ou textarea. Mais cela ne fonctionne pas encore partout, Chrome et Firefox oui, Internet Explorer pas sur tous (à partir de la 10), et Opéra pas du tout :

input::-moz-placeholder,
input::-webkit-input-placeholder,
input::-ms-input-placeholder {
    /* VOTRE CODE */
}

Bouton input type file uniquement sous Chrome

input::-webkit-file-upload-button {
    /* VOTRE CODE */
}

Conclusion

Le CSS comment à être de plus en plus riche en (ce qui n'est pas un mal), nous pouvons maintenant outrepassé les design des navigateurs et faire des applications où le design n'a plus de limite.

Pour ceux qui souhaiterai mettre ce billet en pratique je vous conseil CSS Diner développé par Luke Pacholski développeur et graphiste Canadien chez Mozilla.

<Laisser un commentaire/>

* Champs obligatoire