css basic selector thumbnail

In questo tutorial andiamo a vedere i selectors, i selettori si utilizzano per selezionare gli elementi HTML a cui vogliamo applicare il CSS. Ci sono diverse categorie di selectors, qui vedremo quelli base, ovvero quelli che fanno riferimento al selettore universale,  al nome dell’elemento, alla class e all’id, poi vedremo anche la differenza fra class e id, che è una passaggio fondamentale da capire  per comprendere il CSS. Ed infine vediamo come si raggruppano i selectors.

* (universal selector)

L’universal selector seleziona tutti gli elementi presenti sulla pagina, si applica usando il simbolo * (asterisco).

File: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Basic Selectors</title>
  </head>
  <body>
    <h1>Titolo</h1>
    <h2>Prima Parte</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
    <h2>Seconda Parte</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
  </body>
</html>

File: style.css

* {  /* universal selector */
  text-align: center;
}

Name

Name è basato sul nominativo dell’elemento, molto semplice e lo abbiamo già visto nel tutorial Nozioni Base di CSS3, basta andare sul file CSS, digitare il nominativo dell’elemento e applicargli lo stile.

File: style.css

h1 {  /* name selector */
  color: red;
}

.class

Class è un attributo che diamo all’elemento che vogliamo modificare con il CSS. Il nome del valore che diamo a class deve essere attinente al contesto, possiamo dare il nome che vogliamo ma è buona pratica seguire sempre una certa logica, per noi stessi e anche per gli altri. Se un altro sviluppatore ha a che fare con il nostro codice e si trova una class nominata Portobello, e una Pinco Pallino , potrebbe andare via di testa, e non gli darei tutti i torti. Consiglierei anche di usare parole inglesi, per standardizzare ancora di più il tutto.

Il nome che diamo alla classe non deve contenere spazi, deve esser un tuttuno, possiamo separarlo con il trattino o con il trattino basso, underscore. C’è anche chi separa le parole anche usando la prima lettera di ogni parola in maiuscolo, che sarebbe il camel case.

Per selezionare la class con il CSS dobbiamo aggiungere il . (punto) prima del nome della classe, il . contraddistingue questo tipo di selector, quindi è necessario aggiungerlo.

File: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Basic Selectors</title>
  </head>
  <body>
    <h1>Titolo</h1>
    <h2 class="first-part">Prima Parte</h2>  <!-- class attribute -->
    <p class="first-part">                   <!-- class attribute -->
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
    <h2>Seconda Parte</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
  </body>
</html>

File: style.css

.first-part {  /* class selector */
  color: blue;
}

#id

Id , come class, è un attributo che diamo all’elemento. Anche in questo caso il nome deve essere attinente alla circostanza. Per applicare lo stile con class è necessario aggiungere il . prima del nome dell’elemento, con id, invece, bisogna aggiungere il # (cancelletto).

File: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Basic Selectors</title>
  </head>
  <body>
    <h1>Titolo</h1>
    <h2>Prima Parte</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
    <h2 id="second-part-title">Seconda Parte</h2>  <!-- id attribute -->
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quidem!
    </p>
  </body>
</html>

File: style.css

#second-part-title {  /* id selector */
  color: purple;
}

Quando usiamo classe e quando usiamo id? Domanda da un milione di dollari, risposta molto semplice. Usiamo class quando vogliamo applicare lo stesso stile a due o più elementi, mentre usiamo id quando vogliamo applicare lo stile ad un unico elemento. Tecnicamente CSS ci lascia usare class e id indistantamente, quindi sta a noi sviluppatori seguire questa regola.

Ricapitolando, in un documento dovrebbe esserci un unico elemento con un unico id, mentre ci possono essere più elementi con la stessa class.

Grouping Selector

Con CSS abbiamo la possibilità di raggruppare più elementi per dargli lo stesso stile, è necessario dividere i selectors con la , (virgola) affinchè il css funzioni correttamente.

File: style.css

h1, /* la , è essenziale per separare i selectors */
h2 {
  text-decoration: underline;
}

Raggruppare i selectors ci fa salvare tempo, e codice, quando vogliamo applicare lo stesso stile a due o più elementi, altrimenti dovremmo ripetere lo stile elemento per elemento.

Abbiamo visto i selector base, la lista è ben più lunga: ci sono le pseudo-class, i pseudo-elements e i combinators. Ma ci vuole un tutorial dedicato per ognuno di questi. La cosa più importante da ricordare è la differenza fra class e id, e quando usare una piuttosto che l’altro.


Guarda il video:

Scarica i file del video.

Articoli simili