CREATION D'UN SITE WEB AVEC HTML ET CSS

II.2 LES SELECTEURS AVANCES

Nous avons vu plus haut que le sélecteur permettait d’indiquer les éléments auxquels appliquer le style CSS. Jusque-là nous avons vu comme sélectionner un élément grâce au nom de la balise qui l’entoure ainsi qu’aux attributs class et id, il est temps de voir d’autres sélecteurs :

a) Appliquer le même style à plusieurs éléments

Il est possible d’appliquer le même style à plusieurs éléments à la fois, il suffit de séparer les sélecteurs de ces éléments par des virgules.
Prenons l’exemple suivant :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <h1>AVANT PROPOS </h1> 
        <h2>WISSEN  CORPORATION </h2>

        <p>C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement qui se sont fixés 
        plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en mathématique. </p>
     
         <h2> A PROPOS </h2>
         <p> Je m'appelle Aimé DIUMI DIKOLO, <br/>
         je suis co-fondateur de Wissen Corporation</p>
      
    </body>
</html>

Si on veut que le titre AVANT PROPOS et tous les paragraphes soient en blue, il suffit d’écrire dans le fichier css

Forme.css



p, h1
{
  color:blue;
}

Résultat:

b) * : Le sélecteur universel

* est un sélecteur universel, il sélectionne tous les éléments. Reprenons le code html ci-dessous, modifions seulement le fichier css :

Forme.css


*
{
  color:yellow;
}

Le résultat : tout est en jaune :

Il est souvent utilisé pour mettre le compteur à zéro, par exemple le cas des marges (étant donné que tous les navigateurs n’ont pas les mêmes marges par défaut pour tous les éléments)

c)A B : sélectionne une balise B contenue dans A

Prenons cet exemple :
Formation.html

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <h1>AVANT PROPOS </h1> 
        <h2><span>WISSEN</span>  CORPORATION </h2>

        <p>C’est un groupe formé essentiellement de <span> meilleurs étudiants</span> de nos groupes d’étude et 
        d’encadrement qui se sont fixés plusieurs <span>objectifs</span> dont le premier est celui du partage de la connaissance en Informatique et en 
        mathématique. </p>
     
        <h2> A PROPOS </h2>
        <p> Je m'appelle Aimé DIUMI DIKOLO, <br/>
        je suis co-fondateur de Wissen Corporation</p>
      
    </body>
</html>

Les balises span encadrent les mots suivants : WISSEN, meilleurs étudiants et objectifs.

Forme.css


p span
{
  color:red;
}

En écrivant ceci : seules les balises span contenues dans p seront en rouge. Les autres span ne sont pas concernées.
Voici le résultat :

selecteurs avancés

Il y a que deux span qui sont en rouge, l’autre span n’est pas contenue dans p.

d) A+B : une balise B qui suit la balise A

Sélectionne la première balise B qui vient juste après la balise A
Essayons cet exemple :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <h1>AVANT PROPOS </h1> 
        <p>Avant d'aborder le sujet du livre, parlons un peu de Wissen</p>        
        <h2><WISSEN  CORPORATION </h2>

        <p>C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et 
        d’encadrement qui se sont fixés plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en 
        mathématique. </p>
     
        <h2> A PROPOS </h2>
        <p> Je m'appelle Aimé DIUMI DIKOLO, <br/>
        je suis co-fondateur de Wissen Corporation</p>
      
    </body>
</html>

Forme.css


h2+p
{
  color:red;
}

Seule la première balise p qui suit h2 sera en rouge
Résultat:

La première balise p n’a pas été modifié car elle vient avant h2, le dernier paragraphe est intact car la balise vient à la deuxième position après h2, seule p qui vient juste après h2 sera en rouge.

e) A[Attribut] : sélectionne une balise contenant un attribut donné

Exemple :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <ul>
            <li> <a href="" title="Voir  Accueil" >ACCUEIL< /a></li>
            <li> <a href="" >       COURS </a></li>
            <li> <a href="" title="Meilleurs tutoriels" > TUTOS</a></li>
            <li> <a href="" > FORUM </a></li>
        </ul>

    </body>
</html>

Forme.css


a[title]
{
  color:red;
}

Résultat:

Seuls ACCUEIL et TUTOS sont en rouge car ce sont les deux balises <a> qui ont l’attribut title.

f) A[Attribut="Valeur" ]

Sélectionne seulement les balises qui ont un attribut et une valeur précise.
Dans l’exemple précédant, si on modifiait le code css :

Forme.css


a[title="Meilleurs tutoriels"]
{
  color:red;
}

Résultat:

Seul TUTOS est en rouge car c’est la seule balise qui a l’attribut title ayant pour valeur "Meilleurs tutoriels".

g) A[attribut*= "Val"]

Ici Val doit figurer dans la valeur de l’attribut.
Exemple :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
        <ul>
            <li> <a href="" title="Voir  Accueil" >ACCUEIL< /a></li>
            <li> <a href=""  title="Meilleurs cours" >       COURS </a></li>
            <li> <a href="" title="Meilleurs tutoriels" > TUTOS</a></li>
            <li> <a href="" > FORUM </a></li>
        </ul>

    </body>
</html>

Forme.css


a[title*="Meilleurs"]
{
  color:red;
}

Résultat:

Le style s’applique aux liens COURS et TUTOS car dans la valeur de leur attribut title, on retrouve le mot Meilleurs

h. A > B : sélectionne B qui est enfant (descendant) direct de A

Prenons l’exemple suivant :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
       <div class="bloc_principal"/>
          <p> Premier paragraphe </p/>
          <p> Deuxième paragraphe </p/>
          <div class="bloc_secondaire" />
              <p> Troisième paragraphe </p/>
              <p> Quatrième paragraphe </p/>
          </div/>
      </div/>

    </body>
</html>

Le premier et le deuxième paragraphe ainsi que le bloc secondaire sont les enfants directs de bloc_principal tandis que le troisième et quatrième paragraphe ne sont pas les enfants directs de bloc_principal car ils sont contenus dans le bloc_secondaire qui est lui aussi contenu dans bloc_principal…On peut dire que le bloc_principal est le grand père du troisième et quatrième paragraphe. En appliquant le code css suivant :

Forme.css


.bloc_principal>p
{
  color:red;
}

Le style s’appliquera seulement aux paragraphes (p) qui sont enfants directs de bloc_principal.
Résultat :

i. A~B : sélectionne tous les éléments B précédés par l’élément A.

En d’autres termes, ce sélecteur permet de sélectionner un ou plusieurs éléments qui viennent après un élément donné.
Exemple

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
          <h1> VISUAL BASIC </h1>
          <p>  Premier paragraphe </p/>
          <p>  Deuxième paragraphe </p/>
          <h2>  Introduction </h2> 
          <p>  Troisième paragraphe </p/>
          <p>  Quatrième paragraphe </p/>
          <h3> Variables </h3>
          <p> Cinquième paragraphe </p/>
          <p> Sixième paragraphe </p/>
          <p> septième paragraphe</p/>

    </body>
</html>

Forme.css


h2~p
{
  color:red;
}

Résultat:

Le style n’est pas appliqué aux premiers et deuxièmes paragraphes car ils viennent avant h2.

j. A[b^="c"]

Ce sélecteur permet de sélectionner tous les éléments A dont l’attribut b a une valeur commençant par "c".
Exemple

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
          <p class="para1" >  Premier paragraphe </p/>
          <p class="Important1">  Deuxième paragraphe </p/>
          <p class="para2">  Troisième paragraphe </p/>
          <p class="Important2">  Quatrième paragraphe </p/>
          <p id="para3"> Cinquième paragraphe </p/>

    </body>
</html>

Forme.css


p[class^="Important"]
{
  color:red;
}

Résultat:

Parmi les cinq paragraphes, il y a quatre qui ont l’attribut class et parmi les quatre, il n’y a que deux (le deuxième et quatrième) dont la valeur de l’attribut class commencent par "Important".

k. A[b$="c"]

Ce sélecteur permet de sélectionner tous les éléments A dont l’attribut b a une valeur finissant par "c".

l. A[b*="c"]

Ce sélecteur permet de sélectionner tous les éléments A dont l’attribut b a une valeur contenant "c". Notez que c représente une chaine quelconque.

Retrouvez ce cours en version pdf
Télécharger

Retrouvez ce cours en version pdf
Télécharger

I. NOTIONS DE BASE EN HTML
I.1 INTRODUCTION
I.2 LES BALISES ET LES ATTRIBUTS
I.2.1 Les balises
I.2.2 Les attributs
I.3 STRUCTURE DE BASE D’UNE PAGE HTML
I.4 ENREGISTREMENT D’UN FICHIER HTML
I.5 Commentaires en HTML
I.6.ORGANISATION DU TEXTE
I.6.1 Le retour à la ligne
I.6.2 Les paragraphes
I.6.3 Les titres
I.6.4. Les éléments em, mark et strong
I.6.5 Les listes
I.7 LES IMAGES
I.8.LES LIENS
I.8.1. Lien vers une autre page du site
I.8.2 Lien vers un autre site
I.8.3 Lien vers une ancre (point de repère)
I.8.4 Lien pour télécharger un fichier
I.8.5 Lien pour envoyer un email
I.9 L’AUDIO ET LA VIDEO
I.9.1 L’audio
I.9.2 La vidéo
II. MISE EN FORME DU SITE AVEC CSS
II.1 GENERALITES
II.1.1 Structure du code CSS
II.1.2 Où écrit-on le code CSS
II.1.3 Les commentaires en CSS
II.1.4 Appliquer un style particulier avec id et class
II.1. 5 Les balises universelles
II.2 LES SELECTEURS AVANCES
a) Appliquer le même style à plusieurs éléments
b) * : Le sélecteur universel
c) A B : sélectionne une balise B contenue dans A
d) A+B : une balise B qui suit la balise A
e) A[Attribut] : sélectionne une balise contenant un attribut donné
f) A[Attribut="Valeur" ]
g) A[attribut*= "Val"]
h. A > B : sélectionne B qui est enfant (descendant) direct de A
i. A~B : sélectionne tous les éléments B précédés par l’élément A.
j. A[b^="c"]
k. A[b$="c"]
l. A[b*="c"]
II.3 NOTION D’HERITAGE EN CSS
II.4 MISE EN FORME DU TEXTE
II.4.1 La taille du texte
II.4.2 La police
II.4.3 L’italique
II.4.4 Mettre le texte en gras
II.4. 5 Le soulignement du texte
II.4.6 L’alignement du texte