Objectif

• Connaitre les sélecteurs en CSS

Introduction

• On appelle « sélecteur de balise » (ou « sélecteur d’éléments ») le ou les mots clés précédant l’accolade et servant à indiquer le ou les balises du document auxquelles le style entre accolades s’applique.
• Il y a différents types de sélecteurs dans CSS.

Sélecteur de type

• « sélecteur de type » (parfois appelé « sélecteur de balise » ou Sélecteur d’élément)
• Un sélecteur de type est simplement un sélecteur qui prend une seule balise HTML pour en faire de mise en forme
• Si par exemple vous devez cibler toutes les listes non ordonnées, utilisez simplement ul {}.
• Il s’agit de la sélection la plus simple, puisque le sélecteur est constitué du nom de l’élément sans les caractères de début < et de fin de balise/>.
• Nous inscrivants par exemple:
p {color : yellow ; background-color : blue;}

1	p {color : yellow ; background-color : blue;}

• pour que le texte de tous les paragraphes figure en jaune sur fond bleue;
• Nous pouvons ainsi définir un style propre à chaque élément comme il en existe un par défaut dans les navigateurs

Sélecteurs regroupés

• Afin de réduire les déclarations répétitives dans les feuilles de style, le regroupement de sélecteurs et de déclarations est autorisé.
• On peut appliquer le même style à plusieurs éléments par la sélection de plusieurs éléments différents en les énumérant et en les séparent par une virgule dans le sélecteur. plutôt que de manipuler les définitions:
XHTML

h1 {color : black ; background-color : red;} div {color : black ; background-color : red;} p {color : black ; background-color : red;}

1 2 3

h1 {color : black ; background-color : red;} div {color : black ; background-color : red;} p {color : black ; background-color : red;}

• nous pouvons écrire le style suivant :
XHTML

hl,div,p {color : black ; background-color : red;}

1	hl,div,p {color : black ; background-color : red;}

• Cette possibilité de regroupement peut être utile pour définir des styles communs à un ensemble d’éléments en écrivant ce type de sélecteur pour cet ensemble, puis en ajoutant d’autres propriétés spécifiques à un des éléments de la liste.
• On définit ainsi une sorte de tronc commun à un groupe, puis on affine chacun de ses composants.
• Si nous écrivons par exemple le code suivant :
XHTML

h1,div,p {color : black ; background-color : red;} div {margin : 20px;}

1 2	h1,div,p {color : black ; background-color : red;} div {margin : 20px;}

• l’élément <div> va avoir à la fois un texte noir, un fond rouge et une marge de 20 pixels, car la propriété margin, définie uniquement pour l’élément <div>, s’ajoute à celles déjà définies pour le sélecteur d’éléments hl,div,p.

Sélecteur universel

• Pour appliquer un style à tous les éléments, nous utiliserons le sélecteur universel * avant la définition d’une ou plusieurs propriétés.
• Par exemple, pour que la couleur de fond de tous les éléments soit le jaune, nous écrirons :
XHTML

*{background-color : yelloW;}

1	*{background-color : yelloW;}

• Cela n’empêche pas de modifier cette couleur de fond pour un élément particulier, en la redéfinissant pour celui-ci, par exemple:
XHTML

*{background-color : yellow;} p{background-color : gray;}

1 2	*{background-color : yellow;} p{background-color : gray;}

• Dans ce cas, tous les éléments ont un fond jaune, sauf

  qui a un fond gris redéfini spécialement.

Sélecteurs Contextuels

• Les sélecteurs contextuels sont des chaînes de deux sélecteurs simples ou plus, séparés par des espaces.
• Ces sélecteurs peuvent se voir attribuer des propriétés normales et, en raison des règles d’ordre en cascade, ils auront priorité sur les sélecteurs simples.

• Par exemple, le sélecteur contextuel de P strong { color: blue }
• Cette règle indique que le texte mis en gras dans un paragraphe doit avoir une couleur bleu.
• Le texte en gras dans un titre ne serait pas affecté.

Sélecteur Css d’id

• L’élément d’une page qui possède l’ID fourni (pour une page HTML donné, on ne peut avoir qu’un seul élément pour un ID donné).
• Un sélecteur d’identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut id.
XHTML

/* L'élément avec l'identifiant id="demo" */ #demo { border: red 2px solid; }

1 2 3 4

/* L'élément avec l'identifiant id="demo" */ #demo {   border: red 2px solid; }

Sélecteur de classe

• Avec le sélecteur de classe il est possible d’appliquer des styles différents pour des éléments HTML d’un même type.
• Par exemple, si nous souhaitons que certains paragraphes (<p>) soient affichés en rouge (disons, pour mettre en évidence des paragraphes importants), et que d’autres paragraphes aient un alignement centré, nous pouvons définir deux classes pour chacun de types de paragraphe :

p.introduction{text-align:center}
p.important{color:red}

• Dans le document HTML, l’attribut class permet de choisir la classe qui sera utilisée :

<p class="introduction">Un paragraphe d’introduction</p>
<p class="important">Un paragraphe important</p>

• Pour définir une classe qui s’applique à tous les éléments HTML, et pas uniquement à un seul élément HTML (comme <p> dans l’exemple ci-dessus), on utilise la syntaxe suivante : l’élément HTML n’est pas écrit ; on commence directement par un point, suivi du nom de la classe.

Exemple :
.important{color:red}

• Ainsi, la classe important pourra être utilisée pour tous les éléments HTML :

alt;h1 class="important">Un titre importantalt;/h1>
<p class="important">Un paragraphe importantalt;/p>

Applications

Exercice: 01

• Créer un document de base HTML5 que vous nommer selecteurCss01.html
• Soit le texte à utiliser pour cette page:
<h1>Les sélecteurs CSS</h1>
<h2>Objectif</h2>
<h2>Connaitre les sélecteurs en CSS</h3>
<p>Introduction</p>
<ul>
<li>On appelle « sélecteur de balise » (ou « sélecteur d’éléments ») le ou les mots clés précédant l’accolade et servant à indiquer le ou les balises du document auxquelles le style entre accolades s’applique.</li>
<li>Il y a différents types de sélecteurs dans CSS.</li>
</ul>
<p>L’adresse de notre cours est : <a href="https://apcpedagogie.com/les-selecteurs-css/"> Cliquez pour visiter le site web</a></p>
• Réaliser une feuille de style pour cette page. Cette feuille de style devra :
• La couleur d’arrière plan de la page sera le bleu ciel
• Le titre "<h1>" est au centre de la page
• Mettre le titre de la page en très gros (48px), en gras et en blanc sur fond rouge, avec un bord de 2 pixels de couleur jaune.
• Les autres titres de votre page soient encadrés avec des traits interrompues, et écrit en rouge foncé (darkred)
• Définir la famille de polices de la page sur "Times New Roman", Times, serif
• Définir la famille de polices des titres "<h2>" sur "verdana"
• Utiliser le symbole carré pour les listes <ul>, le texte des listes devra être en plus petit (small)
• Afficher les éléments <li> sous forme de texte "italique".
• La couleur de l’adresse est vert,texte souligné, adresse visité en gris, au survol de souris avec couleur rouge texte gras non souligné et enfin texte bleu souligné si il est active ou à le focus

Exercice: 02

• Créer un document de base HTML5 que vous nommer selecteurCss02.html
• Cette page comprenant un bandeau, une zone de contenu, et un pied de page
• Les différents blocs se présentent comme ceci:
• Bandeau : 600 x 50 px – couleur : #00CCFF
• Contenu : 600 x 400 px – couleur : #FFCC00
• Pied de page : 600 x 50 px – couleur : #33FF99
• Le code suivant est à placer entre les balises <body> et </body> de notre page :
• <div id="bandeau">Ceci est le bandeau</div>
• <div id="contenu">Ceci est le contenu</div>
• <div id="piedpage">Ceci est le pied de page</div>