Selettori avanzati CSS

I selettori avanzati permettono di targetizzare elementi con precisione.

Selettori di attributo

[type="text"] { } /* Attributo uguale */
[href^="https"] { } /* Inizia con */
[href$=".pdf"] { } /* Finisce con */
[class*="btn"] { } /* Contiene */

Combinatori

div p { }      /* Discendente (tutti i p dentro div) */
div > p { }    /* Figlio diretto */
h2 + p { }     /* Fratello adiacente (p subito dopo h2) */
h2 ~ p { }     /* Fratelli generali (tutti i p dopo h2) */

Selettori :not() e :has()

/* Tutti tranne */
li:not(:last-child) { border-bottom: 1px solid #ccc; }

/* Genitore che contiene (nuovo!) */
.card:has(img) { padding-top: 0; }

Hai trovato utile quest'articolo?

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...
  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...
  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...
  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...
  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...