Le Tutoriel de CSS Selectors de base

View more Tutorials:

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 A B 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

Pseudo selectors

Pseudo Syntax Example
Pseudo classes A:B a:visited
Pseudo elements A::B p::first-line
  • TODO Link!

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é.

View more Tutorials: