SELECTOR

di

Come descritto nell’ tutorial precedente , la sintassi di base del css vede coinvolti i seguenti elementi principali:

  • selector
  • property
  • value
proprietà css

Il selector , rappresenta l’elemento html a cui si riferisce una regola css, quindi identifica e seleziona gli elementi al quale applicare uno stile.

In questo articolo vedremo le tipologie di selector più utilizzate:

SELECTOR DI TIPO TAG

Seleziona gli elementi di cui modificare il layout tramite il nome del tag

Data la seguente pagina html:

<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
</body>
</html>

Dato il seguente foglio di stile:

h1 {
color: blue;
background-color: pink;
}

Avremo il seguente Output


SELECTOR DI TIPO ID

Il selettore Id ,utilizza l’ attributo id di uno specifico elemento , quindi a differenza del selettore tag , che agisce sul layout del tag in generale, il selettore id agisce su un unico elemento.

Data la seguente pagina html:

<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
<h1 id="h_uno">paragrafo con id univoco </h1>
<p>paragrafo generico</p>
<p id="p_uno">paragrafo con id univoco </p>
</body>
</html>

Dato il seguente foglio di stile:

h1 {
     color: blue;
	 background-color: pink;
}
#h_uno {
	 background-color: yellow;
}

#p_uno {
	 background-color:green;
}

Avremo il seguente risultato

SELETTORE DI TIPO CLASS

Come il selettore Id , il selettore dell’ attributo class , applica il layout definito nel foglio di stile ad una specifica classe.

Data la seguente pagina html:

<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>

<h1 class="rosa"> Titolo di esempio </h1>
<p class="giallo"> Sono un paragrafo  </p>

</body>
</html>

Dato il seguente foglio di stile:

.rosa {
  text-align: center;
  color: pink;
}
.giallo{
  background-color: yellow;
  
}

Avremo il seguente risultato:

SELETTORE UNIVERSALE

E’ possibile applicare lo stile desiderato all’ intero documento tramite il selettore universale (*)

Data la seguente pagina html:

<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
<h1> Titolo di esempio </h1>
<p> Sono un paragrafo  </p>
</body>
</html>

Dato il seguente foglio di stile:

* {
  text-align: center;
  color: pink;
}

Avremo il seguente risultato:

Lascia un commento