Selettori CSS 3

Selettori di attributo che selezionano sottostringhe

http://www.diodati.org

a[href^="http://"] {
background: #ffc;
border: 1px solid;
padding: 4px;
color: #000;
}

test.txt

a[href$=".txt"] {
font: 1em "Bitstream Vera Sans Mono", monospace;
color: #000;
border-bottom: 1px dashed;
text-decoration: none;
}

ftp://ftp.mozilla.org

a[href*="mozilla"] {
color: #f00;
background: transparent;
}

Pseudo-classe strutturale :last-child

• Voce
• Voce
• Voce

.test li:last-child {
background: #ffc; 
color: #c00; 
border: 1px solid;
}

Pseudo-classe strutturale :only-child

• Voce

.test2 li:only-child {
color: #00f; 
background: transparent;
}

Pseudo-classe strutturale :empty

.test3 li:empty {
background: #ff0; 
color: #000; 
height: 20px;
}

Combinatore del fratello generico

• Voce
• Voce

.test4 li ~ li {
background: #fee; 
color: #000; 
border: 1px solid;
}

La pseudo-classe di negazione

• Voce
• Voce

.test5 *:not(li) {border: 1px solid #f00;}

Pseudo-classi degli stati di un elemento della UI

:enabled e :disabled

input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

:checked

input:checked { border:1px solid #090; background: #ffc; }