Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Pseudoclassi CSS


Cosa sono le pseudo-classi?

Una pseudo-classe viene utilizzata per definire uno stato speciale di un elemento.

Ad esempio, può essere utilizzato per:

  • Disegna un elemento quando un utente ci passa sopra con il mouse
  • Disegna i link visitati e non visitati in modo diverso
  • Disegna un elemento quando viene messo a fuoco

Passa il mouse sopra di me


Sintassi

La sintassi delle pseudo-classi:

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classi

I collegamenti possono essere visualizzati in diversi modi:

Esempio

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

Nota: a:hover DEVE venire dopo a:linke a:visitednella definizione CSS per essere efficace! a:activeDEVE venire dopo a:hovernella definizione CSS per essere efficace! I nomi di pseudo-classi non fanno distinzione tra maiuscole e minuscole.



Pseudo-classi e classi HTML

Le pseudo-classi possono essere combinate con le classi HTML:

Quando passi il mouse sopra il link nell'esempio, cambierà colore:

Esempio

a.highlight:hover {
  color: #ff0000;
}

Passa il mouse su <div>

Un esempio di utilizzo della :hoverpseudo-classe su un elemento <div>:

Esempio

div:hover {
  background-color: blue;
}


Descrizione comando semplice al passaggio del mouse

Passa il mouse sopra un elemento <div> per mostrare un elemento <p> (come un suggerimento):

Passa il mouse sopra di me per mostrare l'elemento <p>.

Tada! Here I am!

Esempio

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}


CSS - La pseudo-classe :first-child

La :first-childpseudo-classe corrisponde a un elemento specificato che è il primo figlio di un altro elemento.

Abbina il primo elemento <p>

Nell'esempio seguente, il selettore corrisponde a qualsiasi elemento <p> che è il primo figlio di qualsiasi elemento:

Esempio

p:first-child {
  color: blue;
}

Abbina il primo elemento <i> in tutti gli elementi <p>

Nell'esempio seguente, il selettore corrisponde al primo elemento <i> in tutti gli elementi <p>:

Esempio

p i:first-child {
  color: blue;
}

Abbina tutti gli elementi <i> in tutti gli elementi <p> ​​del primo figlio

Nell'esempio seguente, il selettore trova tutti gli elementi <i> negli elementi <p> ​​che sono il primo figlio di un altro elemento:

Esempio

p:first-child i {
  color: blue;
}

CSS - La pseudo-classe :lang

La :langpseudo-classe permette di definire regole speciali per linguaggi differenti.

Nell'esempio seguente, :langdefinisce le virgolette per gli elementi <q> con lang="no":

Esempio

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

Altri esempi


Questo esempio mostra come aggiungere altri stili ai collegamenti ipertestuali.


Questo esempio mostra come usare la pseudo-classe :focus.


Mettiti alla prova con gli esercizi

Esercizio:

Imposta il colore di sfondo su rosso, quando passi il mouse su un collegamento.

<style>
 {
  background-color: red;
}
</style>

<body>

<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://w3schools.com">This is a link.</a>

</body>


Tutte le pseudoclassi CSS

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

Tutti gli pseudoelementi CSS

Selector Example Example description
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user