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.


463 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
2 473 vues
Base de données de notre messagerie interne
Nous allons maintenant développer un élément-clé de notre site de rencontres. Nous allons concevoir une messagerie interne entre 2 utilisateurs.Avant de commencer je vous invite à prendre la...
Créer son site de rencontres
1 873 vues
Nesting : Organiser le code CSS en utilisant le nesting pour des sélecteurs imbriqués
Nesting en SASS : Organiser le code CSS avec des sélecteurs imbriqués1. Utilisation du nesting :En SASS, vous pouvez organiser votre code CSS en utilisant le nesting pour des sélecteurs...
Sass
2 511 vues
Utilisation de l'élément <html>, <head> et <body>
Utilisation de l'élément <html>, <head> et <body>Dans un fichier HTML, l'élément <html> est la racine de tout le document et enveloppe tout le contenu HTML. À...
HTML
245 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
5 209 vues
Créer son blog
Développer son Blog de A à ZAprès avoir terminer les articles pour développer votre Forum de A à Z maintenant nous allons nous attaquer à la création d'un blog complet !Pour...
Créer son site
1 588 vues
Configurer l'environnement de développement
Configuration de l'environnement de développement pour SASS1. Création d'une structure de projet :Avant de commencer à coder en SASS, il est important d'avoir une structure de projet organisée....
Sass
344 vues
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellulesDans un tableau HTML, la balise <tr> est utilisée pour définir chaque ligne du tableau,...
HTML
346 vues
Création d'un fichier .htaccess
Le fichier .htaccess est un élément important pour configurer et personnaliser un site web sur un serveur Apache. Dans ce cours, nous allons apprendre comment créer un fichier .htaccess de...
HTACCESS
Publicité
Cette pub permet au site de vivre ...