CSS
I selettori

introduzione

Sintassi

• # id
• . nome della classe
• : pseudo-classname
• :: pseudo-elementname
• [ attr ] / * ha l'attributo attr . * /
• [ attr = " valore "] / * ha l'attributo attr , e il suo valore è esattamente " valore ". * /
• [ attr ~ = " valore "] / * ha l'attributo attr , e il suo valore, quando diviso su spazi , contiene " valore ". * /
• [ attr | = " valore "] / * ha l'attributo attr , e il suo valore è esattamente " valore ", o il suo valore inizia con " valore - ". * /
• [ attr ^ = " valore "] / * ha l'attributo attr , e il suo valore inizia con " valore ". * /
• [ attr $ = " valore "] / * ha l'attributo attr e il suo valore termina con " valore ". * /
• [ attr * = " valore "] / * ha l'attributo attr , e il suo valore contiene " valore ". * /
• Elemento-name
• *

Osservazioni

Selettori di attributi

Panoramica

I selettori di attributi possono essere utilizzati con vari tipi di operatori che modificano di conseguenza i criteri di selezione. Selezionano un elemento utilizzando la presenza di un determinato attributo o valore di attributo.

Gli appunti:

1. Il valore dell'attributo può essere circondato da virgolette singole o doppie virgolette. Nessuna virgola può anche funzionare, ma non è valida secondo lo standard CSS ed è scoraggiata.

2. Non esiste un'unica specifica CSS4 integrata, perché è divisa in moduli separati. Tuttavia, ci sono moduli di "livello 4". Vedi il supporto del browser .

Dettagli

[attribute]

Seleziona elementi con l'attributo dato.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live Demo su JSBin

[attribute="value"]

Seleziona elementi con l'attributo e il valore specificati.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live Demo su JSBin

[attribute*="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato contiene il valore dato da qualsiasi parte (come sottostringa).

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Live Demo su JSBin

[attribute~="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui il valore indicato viene visualizzato in un elenco separato da spazi.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Live Demo su JSBin

[attribute^="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato inizia con il valore.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Live Demo su JSBin

[attribute$="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato termina con il valore dato.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Live Demo su JSBin

[attribute|="value"]

Seleziona gli elementi con un determinato attributo e valore dove il valore dell'attributo è esattamente il valore dato o è esattamente il valore dato seguito da - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Live Demo su JSBin

[attribute="value" i]

Seleziona elementi con un dato attributo e un valore in cui il valore dell'attributo può essere rappresentato come Value , VALUE , vAlUe o qualsiasi altra possibilità maiuscole e minuscole.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Live Demo su JSBin

Specificità dei selettori di attributi

0-1-0

Come selettore di classe e pseudoclass.

*[type=checkbox] // 0-1-0

Nota che questo significa che un selettore di attributo può essere usato per selezionare un elemento dal suo ID a un livello inferiore di specificità che se fosse stato selezionato con un selettore ID : [id="my-ID"] lo stesso numero di #my-ID ma con specificità inferiore.

Vedi la sezione Sintassi per maggiori dettagli.

combinatori

Panoramica

Nota: i selettori di Sibling scelgono come target gli elementi che vengono dopo di essi nel documento di origine. Il CSS, per sua natura (a cascata), non può bersagliare elementi precedenti o genitore . Tuttavia, usando la proprietà order flex, un precedente selettore di pari livello può essere simulato su supporti visivi .

Combinatore discendente: selector selector

Un combinatore discendente, rappresentato da almeno un carattere di spazio ( ), seleziona gli elementi che sono discendenti dell'elemento definito. Questo combinatore seleziona tutti i discendenti dell'elemento (dagli elementi figli in basso).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Live Demo su JSBin

Nell'esempio precedente, i primi due elementi <p> sono selezionati poiché sono entrambi i discendenti di <div> .

Combinatore di bambini: selector > selector

Il combinatore child ( > ) viene utilizzato per selezionare elementi figli , o discendenti diretti , dell'elemento specificato.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Live Demo su JSBin

Il precedente CSS seleziona solo il primo elemento <p> , in quanto è l'unico paragrafo direttamente discendente da un <div> .

Il secondo elemento <p> non è selezionato perché non è un figlio diretto di <div> .

Combinatore Sibling adiacente: selector + selector

Il combinatore adiacente di pari livello ( + ) seleziona un elemento fratello che segue immediatamente un elemento specificato.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Live Demo su JSBin

L'esempio sopra seleziona solo quegli elementi <p> che sono direttamente preceduti da un altro elemento <p> .

General Sibling Combinator: selector ~ selector

Il combinatore generale ( ~ ) seleziona tutti i fratelli che seguono l'elemento specificato.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Live Demo su JSBin

L'esempio sopra seleziona tutti gli elementi <p> preceduti da un altro elemento <p> , indipendentemente dal fatto che siano immediatamente adiacenti.

Selettori del nome di classe

Il selettore del nome della classe seleziona tutti gli elementi con il nome della classe mirata. Ad esempio, il nome della classe .warning selezionerebbe il seguente elemento <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

Puoi anche combinare i nomi delle classi con gli elementi target in modo più specifico. Costruiamo sull'esempio sopra per mostrare una selezione di classi più complicata.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

In questo esempio, tutti gli elementi con la classe .warning avranno un colore di testo blu, gli elementi con la classe .important avranno un colore di testo arancione e tutti gli elementi che hanno sia il nome di classe .important che .warning avranno un testo rosso colore.

Si noti che all'interno del CSS, la dichiarazione .warning.important non ha spazi tra i due nomi di classe. Ciò significa che troverà solo elementi che contengono sia i nomi di classe che warning e important nel loro attributo di class . Quei nomi di classe potrebbero essere in qualsiasi ordine sull'elemento.

Se fosse incluso uno spazio tra le due classi nella dichiarazione CSS, selezionerebbe solo elementi che hanno elementi parent con un .warning classe .warning ed elementi figlio con nomi di classe .important .

Selettori ID

I selettori ID selezionano gli elementi DOM con l'ID target. Per selezionare un elemento con un ID specifico in CSS, viene utilizzato il prefisso # .

Ad esempio, il seguente elemento div HTML ...

<div id="exampleID">
    <p>Example</p>
</div>

... può essere selezionato da #exampleID in CSS come mostrato di seguito:

#exampleID {
    width: 20px;
}

Nota : le specifiche HTML non consentono più elementi con lo stesso ID

Pseudo-classi

Le pseudo-classi sono parole chiave che consentono la selezione in base a informazioni che si trovano all'esterno dell'albero del documento o che non possono essere espresse da altri selettori o combinatori. Questa informazione può essere associato ad un certo stato ( stato e dinamiche pseudo-classi), a posizioni ( strutturali e indirizzare pseudo-classi), per negazioni della ex ( negazione pseudo-classe) o alle lingue ( Lang pseudo-classe). Gli esempi includono se un collegamento è stato seguito o meno ( :visited ), il mouse si trova su un elemento ( :hover ), una casella di controllo è selezionata ( :checked ), ecc.

Sintassi

selector:pseudo-class { 
    property: value;
}

Elenco di pseudo-classi:

Lo pseudoclass :visited non può più essere utilizzato per la maggior parte degli stili in molti browser moderni perché è un buco di sicurezza. Vedi questo link per riferimento.

Selettori di base

Nota: il valore di un ID deve essere univoco in una pagina Web. È una violazione dello standard HTML utilizzare il valore di un ID più di una volta nella stessa struttura del documento.

Un elenco completo di selettori può essere trovato nella specifica CSS Selectors Level 3 .

Come plasmare un input Range

HTML

<input type="range"></input>

CSS

Global boolean con checkbox: checked e ~ (combinatore di fratellanza generale)

Con il selettore ~, puoi facilmente implementare un booleano accessibile globale senza utilizzare JavaScript.

Aggiungi booleano come casella di controllo

All'inizio del tuo documento, aggiungi tutti i booleani che vuoi con un id univoco e il set di attributi hidden :

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Cambia il valore del booleano

Puoi cambiare il valore booleano aggiungendo label con il set di attributi for :

<label for="sidebarShown">Show/Hide the sidebar!</label>

Accesso al valore booleano con CSS

Il normale selettore (come .color-red ) specifica le proprietà predefinite. Possono essere sovrascritti seguendo i selettori true / false :

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Nota che <checkbox> , [sibling ...] e <target> dovrebbero essere sostituiti dai selettori appropriati. [sibling ...] può essere un selettore specifico, (spesso se sei pigro) semplicemente * o nulla se l'obiettivo è già un fratello della casella di controllo.

Esempi per la struttura HTML di cui sopra sarebbero:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

In azione

Vedi questo violino per l'implementazione di questi booleani globali.

CSS3: esempio di selettore all'interno del campo

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

La :in-range pseudo-classe CSS :in-range corrisponde quando un elemento ha il suo attributo value all'interno delle limitazioni di intervallo specificato per questo elemento. Consente alla pagina di fornire un feedback sul fatto che il valore attualmente definito utilizzando l'elemento si trova all'interno dei limiti dell'intervallo. [1]

Pseudo classe bambino

"La pseudo-classe CSS: nth-child (an + b) corrisponde ad un elemento che ha un fratello + b-1 prima nell'albero del documento, per un dato valore positivo o zero per n" - MDN: nth-child

Seleziona l'elemento usando il suo ID senza l'alta specificità del selettore ID

Questo trucco ti aiuta a selezionare un elemento usando l'ID come valore per un selettore di attributi per evitare l'alta specificità del selettore ID.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. L'esempio: non pseudo-classe e B.: focus-all'interno della pseudo-classe CSS

A. La sintassi è presentata sopra.

Il seguente selettore corrisponde a tutti gli elementi <input> in un documento HTML che non sono disabilitati e non hanno la classe .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

La pseudo-classe :not() supporterà anche i selettori separati da virgola in Selectors Livello 4:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Live Demo su JSBin

Vedi la sintassi dello sfondo qui .

B. Il: focus-all'interno della pseudo-classe CSS

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

L'esempio del selettore pseudo-classe: only-child

La pseudo-classe CSS :only-child rappresenta qualsiasi elemento che è l'unico figlio del suo genitore.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

L'esempio sopra seleziona l'elemento <p> che è il figlio unico dal suo genitore, in questo caso un <div> .

Live Demo su JSBin

Il: ultimo tipo di selettore

Il :last-of-type seleziona l'elemento che è l'ultimo figlio, di un particolare tipo, del suo genitore. Nell'esempio seguente, il css seleziona l'ultimo paragrafo e l'ultima intestazione h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle