devstory

Le Tutoriel de CSS Selectors de base

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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

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:
SelectorDescription
*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:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.