sélecteurs

Sélecteurs d'éléments (sélecteurs de type)

Pour appliquer une déclaration css à tous les éléments de type p, la syntaxe est la suivante :

<!DOCTYPE html>
<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<title> sélecteur de paragraphe  </title>
	<style>
	/* règle de style valable pour tous les éléments de type p */
	p{   
		background-color: yellow;/* fond jaune*/
		width:200px; /* largeur 200 pixels */
	 }
	</style>
</head>
    
<body>
	<p>  Je suis un paragraphe. </p>
	<p>  J'en suis un autre. </p>
	<p>  Et moi aussi. </p>
	</body>

</html>

On peut procéder ainsi pour tous les types d'éléments et attribuer par exemple des marges communes à tous les éléments de même type dans une page ou dans un site.

Sélectionner un élément particulier.

Pour déclarer une règle css sur un élément particulier, on peut ajouter l'attribut id à cet élément dans le code html puis sélectionner cet élément dans le code css avec la syntaxe #valeur de l'attribut id.

id est l'abréviation de identifiant. Un seul élément dans une page doit porter un identifiant donné. La valeur donnée à cet attribut id est un mot quelconque, on essaie en général de donner un nom explicite correspondant au contenu ou à un rôle de l'élément.

<!DOCTYPE html>
<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<title> Sélection avec id  </title>
	<style>
		/* règle de style ne concernant que l'élément 
		identifié par le nom definitionJavaScript */
		#definitionJavaScript{
			color: orange;
		}
	</style>
</head>
    
<body>
	  <p>  HTML : langage pour la structure des pages web. </p>
	  <p>  CSS : langage pour la mise en forme et la mise en page. </p>
	  <p id="definitionJavaScript">  
		  JavaScript : langage de programmation côté client, 
		  rend les pages plus actives et interactives. 
	  </p>
	  <p>  PHP : langage de programmation, côté serveur. </p>
</body>
    
</html>

Sélectionner avec l'attribut class

On peut sélectionner un ensemble d'éléments, de types éventuellement différents, en leur ajoutant l'attribut class et en donnant une même valeur à cet attribut pour tous les éléments concernés.

Dans les règles CSS, les éléments ayant pour valeur d'attribut class la valeur xyz sont sélectionnés avec la syntaxe .xyz (un point suivi de la valeur donnée à l'attribut class).

<!DOCTYPE html>
<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<title> la classe  </title>
	<style>
	  .bordureRouge{
		border-color: red;
		border-width: 3px;
		border-style: ridge;
	  }
	</style>
</head>
    
<body>
	<p>
		Je suis un paragraphe. 
	</p>
	  
	<article class="bordureRouge">
		<p>
			Un paragraphe dans l'article.
		</p>
		<p>
			Un autre paragraphe.
		</p>
	</article>
	  
	<p>  
		<a href="#" class="bordureRouge"> Un lien </a> dans un paragraphe. 
	</p>

	<p class="bordureRouge"> 
		Je suis un autre paragraphe.
	</p>

	<p>
		bla bla
	</p>

	<p>
		blibli
	</p>
	  
</body>
    
</html>

On peut attribuer plusieurs valeurs à l'attribut class comme le montre l'exemple ci-dessous :

<!DOCTYPE html>
<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<title> la classe  </title>
	<style>
		.bordureRouge{
			border-color: red;
			border-width: 3px;
			border-style: ridge;
		}
		.fondJaune{
			background-color: yellow;
		}
	</style>
</head>
    
<body>
	<p>  
		Je suis un paragraphe. 
	</p>

	<article class="bordureRouge">
		<p> 
			Un paragraphe dans l'article.
		</p>
		<p> 
			Un autre paragraphe.
		</p>
	</article>

	<p>  
		<a href="#" class="bordureRouge">Un lien</a> dans un paragraphe. 
	</p>

	<p class="bordureRouge fondJaune">  
		Je suis un paragraphe avec deux valeurs pour l'attribut class.  		     
	</p>

	<p>  
		blublu
	</p>

	<p class="fondJaune">  
		Gloups. 
	</p>
          
</body>
    
</html>

Le sélecteur universel

Le sélecteur universel est le sélecteur *. Il permet d'appliquer une même règle css à tous les éléments d'une page.

<!DOCTYPE html>
<html lang="fr">
	
<head>
	<meta charset="utf-8">
	<title> tout le monde  </title>
	<style>
		/* tous les éléments auront une bordure verte de 3px 
		et des marges internes de 5px et externes de 6px */
		*{
			border: 3px solid green;
			padding : 5px;
			margin: 6px;
		}
	</style>
</head>

<body>
	<p> 
		Je suis un paragraphe. 
	</p>

	<article>
		<p> 
			Un paragraphe dans l'article.
		</p>
		<p> 
			Un autre paragraphe.
		</p>
	</article>

	<p>  
		<a href="#">Un lien</a> dans un paragraphe. 
	</p>

	<p>  
		Je suis un autre paragraphe.
	</p>

	<p>   
		bla bla 
	</p>
	<p>  
		blibli 
	</p>
</body>
    
</html>

On remarque deux cadres verts entourant le tout : le cadre vert le plus externe est le cadre entourant l'élément html (présent dans toute page html), le second est le cadre entourant l'élément body (également présent dans toute page html).

Liste de sélecteurs

Si l'on veut appliquer une même règle à plusieurs sélecteurs, on peut déclarer la règle une seule fois en faisant précéder cette règle de tous les sélecteurs concernés, séparés par des virgules.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> liste de sélection  </title>
        <style>
          
          p, a{
            border: 3px solid green;
            padding : 5px;
            margin: 6px;
            }
            
          article, a{
            background: yellow;
          }
        </style>
    </head>
    <body>
          <p>  Je suis un paragraphe. </p>
          
          <article>
            <p> Un paragraphe dans l'article.</p>
            <p> Un autre paragraphe.</p>
          </article>
          
          <p>  <a href="#">Un lien</a> dans un  <span>paragraphe</span>. </p>
          
           <p>  Je suis un autre paragraphe. </p>
           
           <p>   bla bla </p>
           
           <p>  blibli </p>
          
    </body>
</html>

Les paragraphes et les liens sont entourés de vert (mais pas article, span, body, html ).

Les articles et les liens sont sur fond jaune (mais pas p, span, body, html).

Éliminer de la sélection

Dans ce premier exemple, on sélectionne tous les éléments sauf ceux de type p :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> not  </title>
        <style>
           *:not(p) { border: 2px dotted black; margin: 3px; padding: 5px;}
        </style>
    </head>
    <body>
          <p>  Je suis un paragraphe. </p>
          
          <article>
            <p> Un paragraphe dans l'article.</p>
            <p> Un autre paragraphe.</p>
          </article>
          
          <p>  <a href="#">Un lien</a> dans un  <span>paragraphe</span>. </p>
          
           <p>  Je suis un autre paragraphe. </p>
           
           <p>   bla bla </p>
           
           <p>  blibli </p>
           
           <section>
           blabla 
           </section>
          
    </body>
</html>

Dans ce second exemple, on borde les ancres sauf celles qui ont un attribut title (infobulle) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> not  </title>
        <style>
           a{ margin: 3px; padding: 5px;}
           a:not([title]) { border: 2px dotted black; }
        </style>
    </head>
    <body>
           <a href="#"> lien 1 </a>
           <a href="#" title="lien vide"> lien 2 </a>
           <a href="https://www.google.fr/" title="lien google"> lien 3 </a>
           <a href="https://www.google.fr/"> lien 4 </a>
    </body>
</html>

Dans ce troisième exemple, on borde les ancres sauf celles qui ont un attribut title de valeur "A".

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> not  </title>
        <style>
           a{ margin: 3px; padding: 5px;}
           a:not([title="A"]) { border: 2px dotted black; }
        </style>
    </head>
    <body>
           <a href="#"> lien 1 </a>
           <a href="#" title="lien vide"> lien 2 </a>
           <a href="https://www.google.fr/" title="lien google"> lien 3 </a>
           <a href="https://www.google.fr/"> lien 4 </a>
           <a href="https://www.google.fr/" title="A"> lien 5 </a>
    </body>
</html>