Les sélecteurs CSS, partie 2 : on mélange tout

24 03 2010

Nous avons précédemment vus les sélecteurs CSS de base  (partie 1), ceci nous a permis de (re)découvrir des moyens efficaces d’identifier les éléments dans une page. On va à présent aborder le regroupement, les sélecteurs combinés et d’attribut. Prêt? C’est parti!

Le regroupement

Il vous est surement déjà arrivez de devoir répéter plusieurs fois les mêmes propriétés CSS pour des éléments différents, ce qui est très fastidieux, heureusement pour nous le regroupement est là. Ce dernier consiste à enchainer les sélecteurs en les séparant pas des virgules, les propriétés correspondantes s’appliqueront alors à tous ces sélecteurs.

<html>
  <head>
    <style>
      p, div{font-family:verdana;}
      p {color:#F00;}
      div{color:#00F;}
    </style>
  </head>
  <body>
    <p>élément P</p>
    <div>élément DIV</div>
  </body>
</html>

Comme vous pouvez le constater ici les éléments « P » et « DIV » ont la même police d’écriture mais on chacun une couleur différente. On peut donc définir des propriétés communes à de multiples sélecteurs en une fois, ce qui n’empêche pas pour autant de définir des propriétés spécifiques à un sélecteur.

Les combinateurs

On va aborder ici une notion intéressante qui permet d’appliquer des propriétés CSS à un même type d’élément sans lui indiquer de classe ou d’identifiant en utilisant l’arborescence des éléments de la page.

Sélecteur descendant

Pour changer je vous mets directement l’exemple et j’expliques après :

<html>
  <head>
    <style>
      p ul{list-style-type:circle;}
      div ul{list-style-type:square;}
    </style>
  </head>
  <body>
    <p>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </p>
    <div>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </div>
  </body>
</html>

On a ici deux listes à puce la première dans un élément « P », la seconde dans un élément « DIV », on n’a indiqué nulle part de classe ou d’identifiant et pourtant elles apparaissent différemment, pourquoi ?

Regardons la définition des styles, on a « p ul » avec des puces rondes et « div ul » avec des puces carrées, en fait on dit que les éléments « UL », auront des puces rondes quand ils sont inclus dans un élément « P » et qu’ils auront des puces carrées dans dans un « DIV ».

Sélecteur d’enfant

Celui-ci ressemble énormément au précédent, à un détail près, le sélecteur descendant doit être l’enfant, c’est-à-dire qu’il ne doit pas y avoir d’élément entre le sélecteur parent et l’enfant.

<html>
  <head>
    <style>
      p > strong{color:red;}
    </style>
  </head>
  <body>
    <p>
      <strong>l'enfant</strong>
      <div><strong>petit enfant</strong></div>
    </p>
  </body>
</html>

Seul l’enfant est en rouge, le petit enfant n’a aucun style d’appliqué.

Sélecteur adjacent

Il est construit en plaçant deux sélecteurs autour d’un « + », comme ceci « E1 + E2 », cela peut se traduire par tout élément E2 suivant un élément E1.

<html>
  <head>
    <style>
      p + p{color:red;}
    </style>
  </head>
  <body>
    <div>
      <p>E1</p>
      <p>E2</p>
    </div>
  </body>
</html>

Il va de soi que les deux éléments doivent avoir le même
parent.

(Petit) ajout pour le regroupement

Avec ce que vous venez d’apprendre sur les combinateurs vous seriez tentez de faire des regroupements « complexes », comme ceci :

<html>
  <head>
    <style>
      #bloc1 p, li{list-style-type:none;}
    </style>
  </head>
  <body>
    <ul id="liste1">
      <li>puce1</li>
      <li>puce2</li>
      <li>puce3</li>
    </ul>
    <div id="bloc1">
      <p>paragraphe</p>
      <ul>
        <li>puce1</li>
        <li>puce2</li>
        <li>puce3</li>
      </ul>
    </div>
  </body>
</html>

On définit nos style de sorte que la liste (« UL »)dans l’élément « DIV » n’est pas de puce, mais quand on regarde le résultat il n’y a de puce nulle part ! Que s’est il passé ? On a regroupé un sélecteur descendant « #bloc1 p » avec un sélecteur simple « li », il n’a pas été indiqué que ce dernier devait être un descendant de « #bloc1 », voici une autre notation possible pour ce que l’on a fait :

#bloc1 p {list-style-type:none;}
li {list-style-type:none;}

La bonne méthode était donc :

#bloc1 p, #bloc1 li {list-style-type:none;}

Les sélecteurs d’attributs

Ils permettent de sélectionner un élément en fonction de ces attributs. Un peu de syntaxe pour commencer :

  • E[att] : tout élément ayant l’attribut « att »
  • E[att=val] : tout élément ayant l’attribut « att » égale à « val »
  • E[att~=val] : tout élément dont l’attribut « att » contient une liste de valeur séparé par des espaces et dont une de celles-ci est égale à « val »
  • E[att|=val] : tout élément dont l’attribut « att » contient une liste de valeur séparé par des tirets et débutant par « val ».

Exemple :

<html>
  <head>
    <style>
      p[title] {color:red;}
      p[title=autre] {font-family:arial;}
      p[title~=titre2] {font-weight:bold;}
      p[lang|=fr] {color:#00f;}
    </style>
  </head>
  <body>
    <p title="titre"> paragraphe avec un attribut "title"</p>
    <p>paragraphe sans  attribut "title"</p>
    <p title="autre"> paragraphe avec un attribut "title" égale à "autre"</p>
    <p title="titre1 titre2 titre3">paragraphe avec un attribut "title" égale à "titre1 titre2 titre3"</p>
    <p lang="fr-be">paragraphe avec un attribut "lang" égale à "fr-be"</p>
    <p lang="fr-fr">paragraphe avec un attribut "lang" égale à "fr-fr"</p>
    <p lang="en-us">paragraphe avec un attribut "lang" égale à "en-us"</p>
  </body>
</html> 

Ce n’est qu’un au revoir

C’est fini pour le moment, j’espère que vous avez découvert plein de chose et les utiliserez à bon escient (et souvent 🙂 ). J’ai écrit ce tutoriel en suivant cet article Sélecteurs CSS 2.1.

Publicités

Actions

Information

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s




%d blogueurs aiment cette page :