0

Des sélecteurs CSS utiles souvent méconnus

Bonjour les amis.

Aujourd’hui un petit article sur les sélecteurs CSS. Bien que plutôt simple, il existe des sélecteurs CSS qui sont malheureusement sous-exploités ou mal connus des développeurs Front-End.

Ils vont notamment nous permettre de cibler très facilement des balises HTML sans avoir recours aux id ou class. Ça vous intéresse ? Alors, c’est parti !

*

Celui ci n’est pas très complexe à se souvenir. En gros, il appliquera le style à toutes les balises sans distinction. Alors, évidemment, il faut l’utiliser avec parcimonie. Un float:left dans cette balise et c’est la déstructuration assurée. Ce sélecteur peut par contre être très utile pour la réinitialisation des marges par exemple.

* {
margin: 0;
    paddig: 0
}

A + B

Ce sélecteur est très intéressant, il va vous permettre de cibler plusieurs éléments ayant le même parent. Une <div> qui va contenir des <p> et des <a> par exemple.

.maclassCSS p + a {
    padding-top: 20px
}

A > B

Dans ce cas précis, et différemment du sélecteur précédent, celui ci va vous permettre de cibler un élément étant l’enfant direct de l’autre. Il se révélera fort utile dans le cas de listes imbriquées par exemple, afin d’éviter que la sélection d’un <li> affecte les <li> de sous-niveau.

ul > li {
    float:left
}

a[href*=mon_site]

Très peu connu, et pourtant assez pratique. Il va vous permettre de donner un style particulier au lien ayant pour URL celle que vous définissez dans le sélecteur. Imaginons que vous vouliez que tous les liens de Facebook s’affichent en bleu, vous taperez:

a[href*=facebook] {
    color: blue;
}

Si vous souhaitez cibler un lien précis, il existe aussi la version sans * où vous pouvez rentrer l’URL exacte du lien à cibler.

A:not(B)

Comme son nom l’indique, ce sélecteur va vous permettre d’appliquer vos styles aux balises n’ayant PAS la condition entre parenthèses. Par exemple, une <div> n’ayant pas la classe « article ».

div:not(.article) {
    width: 100%;
}

A:first-child / A:last-child

Voici un sélecteur extrêmement utile ! Il va vous permettre de cibler le premier (ou dernier pour last-child) élément. Imaginons une liste <ul>, vous allez pouvoir sélectionner le premier <li> de cette liste.

ul li:first-child {
    display: none;
}

A:nth-child(n)

Concernant ce sélecteur, il peut se révéler fort utile pour cibler une balise HTML dont vous connaissez la position. En effet, le sélecteur va compter le nème enfant et lui appliquer le style.

div:nth-child(3) {
    color: red //le texte de la troisième balise enfant sera rouge
}

Il existe un autre sélecteur du même type qui vous permettra de compter mais en partant de la fin. Il s’agit de nth-last-child().

A:nth-of-type(n)

Contrairement à nth-child, ce sélecteur va lui aussi compter un nombre d’enfants, mais il vous permettra de spécifier le type de balise que vous voulez compter. Imaginons une <div> contenant de multiples balises <p> et <a>, vous allez pouvoir compter le 3eme <a> de cette <div> par exemple.

div a:nth-of-type(3) {
    color: blue;
}

Voila pour cette petit liste non exhaustive de sélecteurs CSS, il y en a bien évidemment d’autres, plus ou moins utiles. N’hésitez pas à nous les notifier en commentaire si certains non-nommés ci-dessus vous paraissent intéressant.

A bientôt les amis.

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.