Sélecteurs CSS 101

Lors de la création d’un site Web, deux langages de codage essentiels sont utilisés: HTML et CSS. Les feuilles de style en cascade, ou CSS, donnent à votre disposition HTML, à la conception et à l’affichage des variations pour divers appareils. En utilisant des sélecteurs CSS, nous pouvons créer une règle pour cibler les éléments HTML qui incluent des propriétés pour réaliser la conception souhaitée. Nous couvrirons ce que sont les sélecteurs CSS, comment les utiliser et les types de sélecteurs.

Qu’est-ce qu’un sélecteur CSS?

Les sélecteurs CSS font partie d’une règle CSS qui vous permet de sélectionner le contenu que vous souhaitez styliser. Dans cet article, nous allons examiner les types de sélecteurs suivants et voir comment nous pouvons les utiliser.

  • Sélecteurs de base
  • Sélecteurs avancés
  • Combinateurs

Types de sélecteurs de base

  • Sélecteurs de type
  • Sélecteurs de classe
  • Sélecteurs d’identifiants
  • Sélecteur universel

Sélecteurs de type

Les sélecteurs de type correspondent à chaque instance du type d’élément (éléments d’en-tête, p, span, div, etc.) dans l’arborescence du document.

La règle suivante ciblera tous les éléments H1 de l’arborescence du document:

h1 {
    font-size: 26px;
}

Sélecteurs de classe

Les sélecteurs de classe sont désignés par un. (point) avant le nom de la classe lors de son utilisation dans un sélecteur. Supposons que nous ayons un document HTML contenant l’extrait de code suivant:

<p class="quote">The only thing we have to fear is fear itself</p>
<span class="author">Franklin D. Roosevelt</span>

Nous pouvons utiliser le sélecteur de classe CSS pour cibler les classes .quote et .author pour donner aux éléments les styles souhaités comme ceci:

.quote {
    font-style: italics;
}

.author {
display: block;
font-weight: bold;
text-align: right;
}

Sélecteurs d’ID

Contrairement aux sélecteurs de classe, les sélecteurs d’ID utilisent un hachage (#) lorsqu’ils sont utilisés dans un sélecteur.

<h1 id="main-title">Cascading Style Sheets</h1>

Sélecteurs universels

Les sélecteurs universels sélectionneront tous les éléments d’une balise. L’exemple suivant sélectionnera chaque élément qui se trouve dans un div.

div * {
    color: gray;
    font-size: 14px;
}

Types de sélecteurs avancés

  • Pseudo-éléments
  • Pseudo-classes
  • Sélecteurs d’attributs

Pseudo-éléments

Les pseudo-éléments permettent un formatage basé sur des informations qui se trouvent en dehors de l’arborescence du document. A partir de CSS3, afin de désigner la différence entre les pseudo-éléments et les pseudo-classes, les pseudo-éléments sont désignés par deux points. Pour la prise en charge d’Internet Explorer 8 et des versions antérieures, utilisez un seul deux-points. Il existe actuellement cinq pseudo-éléments au total:

  • ::après
  • ::avant
  • ::première lettre
  • ::Première ligne
  • ::sélection
En relation :  Utiliser la recherche pour améliorer vos tests A / B

Un :: after peut être utilisé pour beaucoup de choses, y compris l’ajout de guillemets à tous les éléments q. Par exemple:

q::before {
    content: open-quote;
}

q::after {
content: close-quote;
}

Alternativement, a :: before / :: after peut également être utilisé pour insérer du contenu comme ceci:

p::after {
    content: "The End";
    display: block;
    text-align: center;
}

Pseudo-classes

Des pseudo-classes sont ajoutées aux sélecteurs pour spécifier un certain état d’un élément. La liste complète des pseudo-classes comprend:

  • :lien
  • :a visité
  • :actif
  • :flotter
  • :concentrer
  • :vide
  • :cible
  • :vérifié
  • :activée
  • :désactivée
  • : premier du type
  • : dernier type
  • :premier enfant
  • :dernier enfant
  • : nième enfant
  • : nième-dernier-enfant
  • : nième de type

Supposons que nous voulions que nos liens soient bleu foncé, violet en survol et rouge pour les liens visités. Nous pouvons y parvenir avec le code ci-dessous.

a:link {
    color: darkblue;
}

a:visited {
color: red;
}

a:hover {
color: purple;
}

Alternativement, si nous voulions remplacer la couleur du lien pour tous les liens avec une classe de .external, nous pouvons faire:

.external:link {
    color: lightblue;
}

Sélecteurs d’attributs

Les sélecteurs d’attributs sont utilisés pour cibler des éléments en fonction de la présence et / ou de la valeur des attributs HTML associés à l’élément. Ces sélecteurs sont indiqués par des crochets.

En utilisant un lien comme exemple, couvrons les sept façons dont nous pouvons cibler le lien en fonction de l’attribut d’un élément d’ancrage.

une[href]Représente une ancre avec la présence d’un href.
une[href=”http://www.volusion.com/”]Représente une ancre avec un attribut de href et une valeur exactement de http://www.volusion.com/. Notez que cela est sensible à la casse.
une[title~=”Moyens I/O”]Représente une ancre avec un titre dont la valeur est une liste de mots séparés par des espaces blancs, dont l’un est constitué de la valeur Moyens I/O.
une[title|=”foo”]Tout comme l’opérateur ~ =, le | = représente une ancre avec un titre dont les valeurs sont des listes séparées par des tirets contenant la valeur de foo.
une[href^=”http”]Représente toutes les ancres avec un attribut href commençant par http.
une[href$=”.com”]Représente toutes les ancres avec un attribut href qui se termine par .com.
une[href*=”volusion”]Représente toutes les ancres avec un attribut de href qui contient le mot volusion.

Combinateurs

À des occasions particulières où nous voulons cibler des éléments en fonction de leur relation avec d’autres éléments, nous voudrons utiliser des combinateurs. Les combinateurs ressemblent beaucoup aux relations humaines dans la mesure où, comme les familles humaines, CSS a des descendants, des enfants, des parents et des frères et sœurs. Nous couvrirons chacun des quatre types de combinateurs en détail.

  • Sélecteur de descendant
  • Sélecteur enfant
  • Sélecteur de frères et sœurs adjacents
  • Sélecteur général des frères et sœurs
En relation :  Que signifie PCI?

Sélecteurs descendants

Un sélecteur descendant peut cibler tous les éléments qui sont un descendant d’un élément spécifié. Pour sélectionner tous les éléments

qui se trouvent dans une

, nous pouvons faire ce qui suit:

div p {
    font-size: 14px;
}

Sélecteurs enfants

Un sélecteur d’enfant est similaire à un descendant, sauf qu’il ne sélectionne que les enfants immédiats.

<div>
    <a href="https://www.volusion.com/blog/css-selectors/#">Link</a> <!-- Selected -->
    <p>
        <a href="https://www.volusion.com/blog/css-selectors/#">Link</a> <!-- Not selected -->
    </p>
</div>

div > a {
font-size: 14px;
}

Sélecteurs de frères et sœurs adjacents

Le sélecteur de frère adjacent est indiqué à l’aide du symbole plus (+). Ce sélecteur est utilisé dans les cas où l’on souhaite cibler des éléments uniquement lorsque l’élément est immédiatement poursuivi par un autre élément ciblé.

Dans l’exemple ci-dessous, l’élément p précédant immédiatement le H1 aura la couleur du gris, tandis que la couleur des autres éléments p sera le noir.

p {
    color: black;
}

h1 + p {
color: gray;
}

<h1>Title</h1>
<p>This is a paragraph.</p> <!-- targeted by adjacent sibling selector -->
<p>This is a paragraph.</p> <!-- not targeted -->
<p>This is a paragraph.</p> <!-- not targeted -->
<p>This is a paragraph.</p> <!-- not targeted -->

Sélecteurs de frères et sœurs généraux

Un sélecteur de frère général ressemble beaucoup à un sélecteur de frère adjacent, la seule différence étant qu’il sélectionne tous les éléments procédant d’un élément ciblé plutôt qu’un. Le sélecteur général des frères et sœurs est indiqué par un tilde (~).

Dans l’exemple ci-dessous, tous les p frères de l’élément H1 auront les styles appliqués. Cependant, le paragraphe dans le div ne le sera pas car il n’est pas un frère du H1.

p {
    color: black;
}

h1 ~ p {
color: gray;
}

<h1>Title</h1>
<p>This is a paragraph.</p> <!-- targeted by general sibling selector -->
<p>This is a paragraph.</p> <!-- targeted by general sibling selector -->
<p>This is a paragraph.</p> <!-- targeted by general sibling selector -->
<div>
    <p>This is a paragraph.</p> <!-- not targeted -->
</div>

Alex Martinez, Développeur Web Front End

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.