Sélection d'éléments avancée en CSS- Techniques et exemples

Pseudo-classes

Les pseudo-classes vous permettent de sélectionner des états ou des positions spécifiques d'un élément. Par exemple, :hover sélectionne l'élément lorsque le pointeur de la souris est dessus, :focus sélectionne l'élément lorsqu'il est sélectionné ou a le focus, :nth-child() sélectionne un élément enfant spécifique dans un groupe.

Exemples:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

Pseudo-éléments

Les pseudo-éléments permettent de créer des éléments virtuels pour personnaliser un élément existant.

Par exemple, ::before créez ::after des éléments avant et après un élément ::first-line et ::first-letter sélectionnez la première ligne et la première lettre d'un élément.

Exemples:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

Combinateurs

Les combinateurs vous permettent de combiner des sélecteurs pour sélectionner des éléments en fonction de leur relation. Par exemple, element1 element2 sélectionne element2 à l'intérieur de element1, element1 > element2 sélectionne les éléments enfants directs de element1, element1 + element2 sélectionne element2 immédiatement après element1.

Exemples:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

Sélecteurs d'attributs

Les sélecteurs d'attributs vous permettent de sélectionner des éléments en fonction de la valeur de leurs attributs. Par exemple, [attribute] sélectionne des éléments avec l'attribut attribute, [attribute=value] sélectionne des éléments avec l'attribut attribute égal à value, [attribute^=value] sélectionne des éléments avec l'attribut attribute commençant par value.

Exemples:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

:not() sélecteur

Le sélecteur vous permet de sélectionner des éléments qui ne correspondent pas à un sélecteur spécifique. Par exemple, sélectionne les éléments qui n'ont pas la classe, sélectionne les éléments qui n'ont pas l'ID. :not() :not(.class) class :not(#id) id

Exemples:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

Ces exemples illustrent la sélection avancée d'éléments dans CSS. Vous pouvez personnaliser et appliquer ces techniques pour styliser et personnaliser les éléments de votre page Web comme vous le souhaitez.