CSS

Sélecteurs CSS : identifier les éléments HTML auxquels appliquer des styles

Sélecteurs CSS : Identifier les éléments HTML auxquels appliquer des styles


Les sélecteurs CSS sont des motifs qui permettent de cibler et de sélectionner des éléments HTML spécifiques afin de leur appliquer des styles de présentation. Comprendre les différents types de sélecteurs CSS est essentiel pour contrôler l'apparence de votre site Web.


1. Sélecteurs de type :


Les sélecteurs de type ciblent tous les éléments d'un certain type sur une page. Par exemple, le sélecteur p cible tous les paragraphes <p> dans le document HTML.


Exemple :


p { 
  color: blue; 
}


2. Sélecteurs de classe :


Les sélecteurs de classe ciblent les éléments qui ont une classe spécifique attribuée dans le code HTML. Vous pouvez réutiliser la même classe sur plusieurs éléments.


Exemple :


<p class="important">Ce paragraphe est important.</p>


.important { 
  font-weight: bold; 
}


3. Sélecteurs d'ID :


Les sélecteurs d'ID ciblent un élément HTML spécifique avec un attribut ID unique. Chaque ID doit être unique dans le document.


Exemple :


<div id="header">Contenu de l'en-tête</div>


#header { 
  background-color: gray; 
}


4. Sélecteurs de descendant :


Les sélecteurs de descendant ciblent des éléments HTML spécifiques qui sont des descendants directs ou indirects d'autres éléments.


Exemple :


<ul id="menu">
  <li>
    <a href="#">Accueil</a>
  </li>
</ul>


#menu li { 
  list-style-type: none; 
}


5. Sélecteurs d'attribut :


Les sélecteurs d'attribut ciblent des éléments HTML en fonction de leurs attributs ou de leurs valeurs d'attribut spécifiques.


Exemple :


<a href="https://www.example.com">Lien vers Example</a>


a[href="https://www.example.com"] { 
  color: green; 
}


En utilisant ces sélecteurs CSS, vous pouvez cibler et styliser précisément les éléments HTML de votre page Web. En combinant différents types de sélecteurs, vous avez un contrôle total sur l'apparence de votre site.


455 vues
Posté le 22 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
1 536 vues
Explorer les fonctions de manipulation de couleur, de texte, etc.
Exploration des fonctions de manipulation en SASS1. Manipulation de couleurs :SASS propose un ensemble de fonctions intégrées pour manipuler les couleurs. Vous pouvez ajuster la luminosité, la...
Sass
239 vues
Création de tableaux avec <table>.
Création de tableaux avec <table>La balise <table> est utilisée pour créer des tableaux dans une page HTML. Elle permet de structurer les données tabulaires en lignes et colonnes....
HTML
314 vues
Variables et types de données
Variables et Types de Données en JavaScript1. Variables :Une variable en JavaScript est un conteneur pour stocker des données. Vous pouvez utiliser des variables pour stocker différentes valeurs...
JS
3 097 vues
Formulaire d'inscription en PHP (2/2)
Dans cette deuxième partie nous allons compléter et sécuriser notre formulaire avec différentes conditions.Par exemple nous allons utiliser la function crypt de PHP.Exemple :<?php ...
Créer son site de rencontres
11 698 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
236 vues
CSS interne : l'utilisation de balises <style> dans la section <head> du document HTML
CSS Interne : L'utilisation de balises <style> dans la section <head> du document HTMLLe CSS interne est une méthode de stylisation où les styles sont définis directement dans la...
CSS
3 710 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
1 946 vues
Charger automatiquement les messages
Après avoir amélioré l'envoi de nos messages nous allons également améliorer le système de recharge automatique pour l’affichage de nouveau message.
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...