Sélecteurs CSS – Types, syntaxe et utilisation
Pour plus d’informations sur l’utilisation des sélecteurs CSS pour naviguer dans un document HTML, veuillez consulter le chapitre Articles pratiques. Les articles de ce chapitre répondent à des questions fréquemment posées et contiennent des exemples C# qui fournissent les informations nécessaires à l’utilisation de la bibliothèque Aspose.HTML for .NET pour résoudre des tâches spécifiques.
Pour apprendre à utiliser les méthodes QuerySelector() et QuerySelectorAll() afin d’interroger les éléments du DOM qui correspondent à un sélecteur CSS, veuillez consulter l’article Comment utiliser le sélecteur CSS. Dans cet article, découvrez comment appliquer efficacement des sélecteurs pour sélectionner les éléments que vous souhaitez styliser.
Dans cet article, découvrez comment appliquer efficacement des sélecteurs pour sélectionner les éléments que vous souhaitez styliser. Vous aborderez les sélecteurs de base, les sélecteurs combinatoires, les sélecteurs d’attributs et les pseudo-sélecteurs. La connaissance des sélecteurs CSS sera utile aux développeurs frontaux, aux concepteurs de sites web et à tous les développeurs qui utilisent CSS et travaillent avec des documents (X)HTML.
Sélecteurs CSS
Les sélecteurs CSS sont utilisés pour sélectionner les éléments HTML que vous souhaitez styliser et appliquer un ensemble de règles CSS. Il existe plusieurs types de sélecteurs CSS.
- Sélecteurs de base – Basic Selectors sélectionner des éléments en fonction de leur nom, de leur identifiant ou de leur classe, ou sélectionner tous les éléments de la page web.
- Sélecteurs d’attributs– Attribute Selectors permet de sélectionner les éléments HTML qui ont un attribut spécifique ou un attribut avec une valeur spécifiée.
- Sélecteurs de groupe – Group Selectors sélectionner des éléments groupés dans des listes séparées par des virgules.
- les Sélecteurs combinés – Combinator Selectors sélectionnent les éléments en fonction d’une relation spécifique entre eux. Les éléments peuvent être mis en correspondance en fonction de leur position les uns par rapport aux autres dans le code de balisage ou de leur imbrication dans le modèle d’objet du document.
- les Pseudo-sélecteurs – Pseudo Selectors sélectionnent des éléments ou une partie d’un élément en fonction d’un certain état. Les pseudo-classes sont utilisées dans les sélecteurs CSS pour permettre un formatage basé sur des informations qui ne sont pas contenues dans l’arborescence du document.
Vous pouvez combiner les sélecteurs CSS de nombreuses manières pour obtenir une grande spécificité et une grande flexibilité.
Sélecteurs de base
Les sélecteurs CSS de base sélectionnent les éléments HTML en fonction de leur identifiant, de leur classe, de leur type ou sélectionnent tous les éléments de la page web.
Sélecteur de type ou sélecteur d’élément CSS
Le sélecteur de type ou sélecteur d’élément spécifie à quels éléments une règle doit s’appliquer, en nommant le type de l’élément, tel que <h1>. En d’autres termes, le sélecteur d’éléments sélectionne les éléments HTML en fonction de leur nom.
CSS
1h1 {
2 text-align: center;
3 color: DarkRed;
4} HTML Example
1<h1>Aspose.HTML for .NET</h1>
2<p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.</p>
Sélecteur d’ID
Le sélecteur d’ID sélectionne un élément spécifique en utilisant l’attribut id d’un élément HTML. Un élément sera sélectionné si son attribut id correspond exactement à la valeur spécifiée dans le sélecteur d’ID.
CSS
1#demo {
2 background-color: #fcded4;
3 font-size: 24pt;
4}HTML Example
1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>
Sélecteur de classe
Le sélecteur de classe fait correspondre les éléments HTML avec un attribut class spécifique. Vous pouvez utiliser l’attribut class pour tous les éléments HTML valides dans la section body d’un document HTML, y compris l’élément <body> lui-même. Pour sélectionner des éléments avec une classe spécifique, écrivez un point (.), suivi du nom de la classe. Par exemple, si nous voulons que tous les éléments de la classe “main” aient une couleur d’arrière-plan, une couleur de texte et une taille de police différentes, nous utiliserons la règle CSS suivante :
CSS
1.main {
2 background-color: #d4e9fc;
3 color: red;
4 font-size: 16pt;
5} HTML Example
1<h1>CSS Class Selector</h1>
2<p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.</p>
3<p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.</p>
Sélecteur universel
Le sélecteur universel est utilisé pour sélectionner tous les éléments des pages web. Par exemple, si nous voulons que chaque élément ait un alignement de texte central et une couleur de texte bleue, nous utiliserons la règle CSS suivante :
CSS
1* {
2 text-align: center;
3 color: #0154a2;
4}HTML Example
1<h1>CSS Universal Selector</h1>
2<p>The Universal Selector selects all elements. The star symbol will target every single element on the page.</p>
Sélecteurs d’attributs
Les sélecteurs d’attributs CSS constituent un moyen simple et efficace d’appliquer des styles aux éléments HTML en fonction de la présence d’un attribut particulier ou d’une valeur d’attribut. C’est un excellent moyen de styliser les éléments HTML en les regroupant sur la base de certains attributs, et le sélecteur d’attributs sélectionnera les éléments ayant des attributs similaires. Vous pouvez créer un sélecteur d’attributs en mettant l’attribut entre crochets :
| CSS Selector | Example | Description |
|---|---|---|
| [attribute] | [translate] | Selects all elements with an attribute name of translate. |
| [attribute=value] | [translate=no] | Selects all elements with translate="no". Represents elements with an attribute name of translate whose value is exactly no. |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word flower. |
| [attribute|=value] | [lang|=de] | Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches. |
| [attribute^=value] | a[href^="#"] | Selects every <a> element whose href attribute value is prefixed, begins with "#" (internal links). |
| [attribute$=value] | a[href$=".html"] | Selects every <a> element whose href attribute value is suffixed (followed) by value, ends with ".html". |
| [attribute**=*value] | a[href*=“aspose”] | Selects every <a> element whose href attribute value contains the “aspose” anywhere in the URL. |
Prenons l’exemple d’un des sélecteurs d’attributs CSS :
CSS
1h3[class*="1"] {
2 background-color: #b4e8fd;
3}HTML Example
1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>
Sélecteurs de groupe
Vous pouvez styliser plusieurs sélecteurs si vous le souhaitez. Il suffit de séparer les sélecteurs par une virgule, comme dans l’exemple suivant :
CSS
1h1, h2, h3 {
2 color: #36C;
3 font-family: helvetica;
4}HTML Exemple
1<h1>CSS Group Selector (,)</h1>
2<h2>The defined style will apply to h1, h2 and h3 elements.</h2>
3<h3>The order of the list doesn't matter.</h3>
Sélecteurs de combinateurs
Les sélecteurs de combinaison sélectionnent les éléments en fonction de leur relation entre eux. Il existe quatre combinateurs différents en CSS : le sélecteur de descendant (espace), le sélecteur d’enfant (>), le sélecteur de frère adjacent (+) et le sélecteur de frère général (~) :
| CSS Selector | Example | Description |
|---|---|---|
| element element | div p | The " " (space) Combinator selects all <p> elements that are descendants of the first <div> element. |
| element>element | div > span | The > Combinator selects all <span> elements where the parent is a <div> element. |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements. The + combinator matches the second element only if it immediately follows the first element. |
| element~element | div ~ p | The ~ Combinator selects siblings. This means that it selects every <p> element that is preceded by a <div> element. |
Prenons l’exemple d’un des sélecteurs de combinateurs CSS. Le sélecteur d’enfant (>) sélectionne tous les éléments qui sont les enfants d’un élément spécifié. Les éléments correspondant au deuxième sélecteur doivent être des enfants directs des éléments correspondant au premier sélecteur :
CSS
1div > p {
2 background-color: #d4e9fc;
3}HTML Exemple
1<div>
2 <p>CSS Child Selector (>). Paragraph 1 is in a div.
3 <section>
4 <p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!</p>
5 </section>
6 </p>
7</div>
8<p>Paragraph 3 is not in the div at all.</p>
Pseudo-sélecteurs
Les pseudo-sélecteurs permettent de formater les éléments sur la base d’informations autres que la position de l’élément dans l’arborescence du document. Les sélecteurs de pseudo-classe et de pseudo-élément sont précédés des deux points : et ::.
La pseudo-classe est utilisée pour définir un état spécial pour un élément. Par exemple, elle peut être utilisée pour styliser un élément lorsque l’utilisateur le survole, ou pour styliser différemment les liens visités et non visités. Un pseudo-élément CSS est utilisé pour styliser des parties spécifiques d’un élément. Par exemple, p::first-letter peut être utilisé pour changer la première lettre d’un paragraphe.
Prenons l’exemple d’un des sélecteurs de pseudo-éléments CSS :
CSS
1p::first-letter {
2 font-size: 130%;
3 color: red;
4 font-family: arial;
5}HTML Exemple
1<p>Pseudo-Element Selectors</p>
2<p>A CSS Pseudo-Element is used to style specified parts of an element.</p>
3<p>For example, p::first-letter can be used to change the first letter of a paragraph.</p>
Aspose.HTML propose des applications Web HTML qui sont une collection en ligne de convertisseurs gratuits, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. Convertissez, fusionnez, encodez, générez facilement du code HTML, extrayez des données du web ou analysez des pages web en termes de référencement, où que vous soyez. Utilisez notre collection d’applications web HTML pour effectuer vos tâches quotidiennes et rendre votre flux de travail fluide !