Selezione avanzata degli elementi nei CSS- Tecniche ed esempi

Pseudo-classi

Le pseudo-classi consentono di selezionare stati o posizioni specifici di un elemento. Ad esempio, :hover seleziona l'elemento quando il puntatore del mouse si trova sopra di esso, :focus seleziona l'elemento quando è selezionato o è attivo, :nth-child() seleziona un elemento figlio specifico in un gruppo.

Esempi:

/* 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-elementi

Gli pseudo-elementi consentono di creare elementi virtuali per personalizzare un elemento esistente.

Ad esempio, ::before crea ::after elementi prima e dopo un elemento ::first-line e ::first-letter seleziona la prima riga e la prima lettera di un elemento.

Esempi:

/* 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;  
}  

 

Combinatori

I combinatori consentono di combinare i selettori per selezionare gli elementi in base alla loro relazione. Ad esempio, element1 element2 selects element2 inside element1, element1 > element2 seleziona gli elementi figli diretti di element1, element1 + element2 selects element2 immediatamente dopo element1.

Esempi:

/* 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;  
}  

 

Selettori di attributi

I selettori di attributi ti consentono di selezionare gli elementi in base al valore dei loro attributi. Ad esempio, [attribute] seleziona gli elementi con l'attributo attribute, [attribute=value] seleziona gli elementi con l'attributo attribute uguale a value, [attribute^=value] seleziona gli elementi con l'attributo attribute che inizia con value.

Esempi:

/* 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() selettore

Il selettore consente di selezionare elementi che non corrispondono a un selettore specifico. Ad esempio, seleziona gli elementi che non hanno la classe, seleziona gli elementi che non hanno l'ID. :not() :not(.class) class :not(#id) id

Esempi:

/* 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;  
}  

 

Questi esempi dimostrano la selezione avanzata degli elementi nei CSS. Puoi personalizzare e applicare queste tecniche allo stile e personalizzare gli elementi della tua pagina web come desideri.