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.


402 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
183 vues
Utilisation de async/await
Utilisation de async/await en JavaScriptL'async/await est une syntaxe introduite dans ECMAScript 2017 pour simplifier la gestion des promesses et rendre le code asynchrone plus lisible et plus...
JS
4 651 vues
Que mettre dans la balise head
Afin de continuer à faire connaitre votre site pour son référencement nous allons parler du contenu de base dans la balise <head>.La balise <head> joue un rôle essentiel...
Créer son site
205 vues
Utilisation de l'élément <li> pour les éléments de liste
Utilisation de l'élément <li> pour les éléments de listeL'élément <li> est utilisé pour définir chaque élément individuel d'une liste, qu'elle soit ordonnée <ol> ou non...
HTML
4 516 vues
Afficher la liste des articles
Mise en pagePour commencer nous allons créer la page maître de notre blog. C'est cette page qui contiendra tous les articles qui constituerons notre blog.Tout d'abord nous allons créer...
Créer son site
3 067 vues
Le protocole Open Graph
IntroductionLe protocole Open Graph permet à n'importe quelle page Web de devenir un objet riche dans un graphe social. Par exemple, ceci est utilisé...
Créer son site
3 831 vues
Afficher son article
Afficher son articleNous allons créer une nouvelle page que l'on nommera voir_article.php. Cette page affichera tous les articles qui constituerons notre blog.Nous allons modifier notre...
Créer son site
2 249 vues
Téléchargement et installation de PhpMyAdmin sur un serveur local ou distant
Téléchargement et Installation de PhpMyAdmin1. Téléchargement de PhpMyAdmin :Rendez-vous sur le site officiel de PhpMyAdmin à l'adresse https://www.phpmyadmin.net/.Cliquez sur le bouton de...
SQL
426 vues
Qu'est-ce que PHP ?
Introduction à PHPPHP, acronyme de "Hypertext Preprocessor", est un langage de programmation côté serveur très populaire, principalement utilisé pour développer des sites Web dynamiques et...
PHP
Publicité
Cette pub permet au site de vivre ...