Le Tutoriel de CSS Selectors de base

Qu'est-ce que CSS Selector?
Universal selector
CSS Type Selector
CSS Class Selector
CSS ID Selector
CSS Attribute Selector

1. Qu'est-ce que CSS Selector?

CSS Selector est utilisé pour rechercher (ou sélectionner) des éléments dans un document HTML afin de leur appliquer des styles.

L'Exemple simple:

/** Select all elements with class contains abc */

.abc  

/** Select element with ID = abc */

#abc

CSS Selectors peuvent être divisés en 3 catégories:

Basic Selectors

Les Selector de base vous aident à sélectionner des éléments en fonction de leur Name, ID,Class ou Attribute.

Les Selector de base sera mentionné dans cet article.

Combining selectors

Sélectionnez les éléments en fonction de la relation entre eux.

Combinator	Syntax	Example
Descendant combinator	`AB`	div span div .item
Child combinator	`A> B`	ul > li
General sibling combinator	`A~ B`	p ~ span
Adjacent sibling combinator	`A+ B`	h2 + p
Column combinator	`A\|\| B`	`col \|\| td`

Le Tutoriel de CSS combinator Selectors

Pseudo selectors

Pseudo	Syntax	Example
Pseudo classes	`A:B`	a:visited
Pseudo elements	`A::B`	p::first-line

CSS Pseudo Selector

2. Universal selector

Universal selector (Sélecteur universel): sélectionne tous les éléments ou tous les éléments d'un namespace (espace de noms).

La Syntaxe:

Selector	Description
*	Sélectionnez tous les éléments.
\|	Sélectionnez tous les éléments.
ns\|*	Sélectionnez tous les éléments dans l'espace de noms ns.
\|*	Sélectionne tous les éléments déclarés sans espace de noms.

Par exemple, sélectionnez tous les éléments et définissez une bordure bleue pour celui-ci.

universal-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: *</title>
      <style>
         *  {
           border: 1px solid green;
           margin: 5px;
         }
      </style>
   </head>
   <body>
     <h1>I am H1 element</h1>
     <div>I am div element</div>
     <p>I am P element</div>
   </body>
</html>

3. CSS Type Selector

CSS Type Selector vous aide à rechercher des éléments par leur nom.

Par exemple, sélectionnez tous les éléments <div>:

div  {
   color: red;
}

Par exemple, sélectionnez tous les éléments <span>:

type-selector-example1.css

span  {
   background-color: skyblue;
}

type-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: ns|*</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example1.css" />
   </head>
   <body>
     <span>I am span element</span>
     <p>I am P element</p>
     <span>I am span element</span>
   </body>
</html>

Si CSS Selector ont la même règle, vous pouvez les écrire brièvement, CSS Selector seront séparés par des virgules et utiliseront la même règle.

type-selector-example2.css

/** Select H1 or H2 */
h1, h2  {
   color: blue;
}

type-selector-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Type Selector</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example2.css" />
   </head>
   <body>
     <h1>I am H1 element</h1>
     <h2>I am H2 element</h2>
     <h3>I am H3 element</h3>
   </body>
</html>

4. CSS Class Selector

CSS Class Selector sélectionne des éléments en fonction de la valeur de l'attribut de classe.

Par exemple, sélectionnez tous les éléments avec class = "txt-green" ou incluez le mot "txt-green".

class-selector-example1.css

.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}

class-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example1.css" />
   </head>
   <body>
     <h1 class ="txt-green">I am H1 with class = 'txt-green'</h1>
     <p>I am P element</p>
     <h2 class="txt-green bg-yellow">I am H2 with class = 'txt-green bg-yellow'</h2>
   </body>
</html>

Par example:

class-selector-example2.css

/* <p> with class 'txt-green' or includes 'text-green' */
p.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}
/* <div> with class inculudes both 'text-green' and 'bg-yellow' */
div.txt-green.bg-yellow  {
    color: green;
    font-style: italic;
}

class-selector-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example2.css" />
   </head>
   <body>
     <h1 class ="txt-green">I am H1 with class = 'txt-green'</h1>
     <p class ="txt-green">I am P element with class='txt-green'</p>
     <div class="txt-green bg-yellow">I am DIV with class = 'txt-green bg-yellow'</div>
     <br/>
     <span class="txt-green bg-yellow">I am SPAN with class = 'txt-green bg-yellow'</span>
   </body>
</html>

5. CSS ID Selector

CSS ID Selector vous aide à sélectionner des éléments en fonction de la valeur de l'attribut ID, la valeur de l'attribut ID doit correspondre à la valeur donnée par Selector. Remarque: CSS ID Selector "n'est pas sensible à la casse" Case insensitive).

id-selector-example.css

#demo  {
   color: blue;
   font-size: 30px;
}

id-selector-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>ID Selector</title>
      <link rel="stylesheet" type="text/css" href="id-selector-example.css" />
   </head>
   <body>
     <h1 id = "demo">Demo</h1>
     <span>I am span element</span>
     <p>I am P element</p>
   </body>
</html>

6. CSS Attribute Selector

CSS Attribute Selector vous aide à sélectionner des éléments en fonction de l'attribut ou de la valeur d'un attribut donné.

Le Tutoriel de CSS Attribute Selector