4. La notion de sélecteurs

4.2 Class et attributs ID

A. Les attributs et sélecteurs "class"

Mécanisme puissant pour:

définir de classes de contenu (indépendamment des balises)
pour différencier plusieurs variantes d'une même balise

Principe: On associe une valeur à l'attribut "class"
On peut aussi définir le style des enfants de la balise qui a l'attribut "class" ; mais il faut indiquer le chemin complet de l'arbre (dans l'ex., default ul li) .
il est possible d'avoir plusieurs classes par éléments (dans l'ex., le 2ème <p>) .
Lorsque deux styles définissent la même propriété, c'est celui qui est le plus L de l'élément qui "gagne" (dans l'ex., font-size)

Exemple 4-1: Classes dans une simple feuille de style

http://tecfa.unige.ch/guides/css/ex/simple-css2.html

<STYLE type="text/css">

   P.intro 	{color: blue; margin-left: 4em; margin-right: 2em;}

   .default ul li {font-size: 0.8em;}

   .default  {margin-left: 2em; font-size:1em;}

   .bleu {color:red;}

  </STYLE>

......

<p class="intro">

      Après des années de bricolage infâme ....

    </p>

<p class="default bleu">

   bla bla

</p>

<div class="default">

<ul>

  <li>item 1</li>

  <li>item 2</li>

</ul>

<pre>

   notre classe default marche partout, même pour un para préformaté

</pre>

</div>

Le style .default s'appliquera à tous les éléments dont la classe est "default" alors que le style .intro seulement aux balises <p> .

B. Attribut ID

Parfois plus économique d'utiliser l'attribut ID (p.ex. lorsqu'on a un script qui implique des id)
on peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)
Le selecteur s'écrit avec un # devant
Si on veut définir les éléments enfants d'un éléments avec l'attribut id ayant une classe définie, on peut le faire sans passer par les éléments intérmédiaire

(pour l'ex. ci-dessus, sans ul)

C. "wildcard"

"Wildcard" * (s'applique à tous le éléments) :

* {	font-size: 12pt; }

pratique pour définir une police par défaut pour tous les éléments sans la définir à chaque fois (y compris <pre> et <button> .

4.3 Les balises HTML <div> et <span>

ont été créés spécialement pour un usage avec les feuilles de style

A. <div>

peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! <div> est un bloc alors que <span> est un élément in-line, cf 5.1 "Types d'éléments et défauts HTML" [22] Il sera pas possible de définir une largeur de 100% -toute la page- pour un span)
<div> avec l'attribut class peut servir à faire des "custom tags" (voir plus loin)
<span> sert à changer une séquence de caractères à l'intérieur d'une balise

B. Définition "inline" d'un style

Exemple 4-2: Changer la couleur d'un partie du texte

http://tecfa.unige.ch/guides/css/ex/simple-div-span.html

<div style="color: blue">

      <h1>L'influence d'un div tag qui aime le bleu</h1>

<P>

           	bla bla bla

      </P>

</div>

C. Définition externe d'un style

Exemple 4-3: Faire des backgrounds avec une définition externe

http://tecfa.unige.ch/guides/css/ex/simple-div2.html

  <style>

     div.important {

       background: rgb(204,204,255);

       padding: 0.5em; border: none;

  </style>

.....

<body>

    <div class="important">

      <h1>Une section importante</h1>

      <h2>Un sous-titre</h2>

<P>

         	Tout le div a son joli background à lui.

         	bla bla bla

      </P>

    </div>

4.4 Sélecteurs contextuels

Exemple 4-4: Simple utilisation d'un sélecteur contextuel

http://tecfa.unige.ch/guides/css/ex/simple-css5.html

   <STYLE type="text/css">

      <!--

      P strong 	{color: red;}

-->

    </STYLE>

......

<P>

      Ceci est un paragraph avec un <strong>
 strong modifié </strong>
.

En d'autres terme cela permet de redéfinir de façon simple le rendering

de certaines balises "logiques" comme &lt;em&gt; ou &lt;strong&gt;.

    </P>

4.5 Pseudo sélecteurs (élément et classes)

Un pseudo sélecteur identifie un élément par des critères autres que balise et classe
CSS2 en définit pleins, ci-dessous les éléments de CSS1.
Attention: certains navigateurs implémentent mal ces fonctionalités CSS1.

A. Pseudo-éléments

permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)
Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla

Exemple 4-5: Pseudo-sélecteurs

http://tecfa.unige.ch/guides/css/ex/pseudo-selectors.html

    <style>

      P:first-letter
 { font-size: 500%; color: green }

      P:first-line
 { color: green }

    </style>

B. Pseudo-classes

Pour rendre plus difficile la lecture des liens :)

A:link
 { color : white }

A:visited
 
{ color : yellow }

A:active
 {color : red }

4. La notion de sélecteurs

Rappel de la syntaxe pour une règle CSS:

4.1 Simple sélecteurs pour les balises

4.2 Class et attributs ID

A. Les attributs et sélecteurs "class"

Exemple 4-1: Classes dans une simple feuille de style

B. Attribut ID

C. "wildcard"

4.3 Les balises HTML <div> et <span>

A. <div>

B. Définition "inline" d'un style

Exemple 4-2: Changer la couleur d'un partie du texte

C. Définition externe d'un style

Exemple 4-3: Faire des backgrounds avec une définition externe

4.4 Sélecteurs contextuels

Exemple 4-4: Simple utilisation d'un sélecteur contextuel

4.5 Pseudo sélecteurs (élément et classes)

A. Pseudo-éléments

Exemple 4-5: Pseudo-sélecteurs

B. Pseudo-classes