Care sunt Pseudo-clase?
Un pseudo-clasă este utilizat pentru a defini o stare specială a unui element.
De exemplu, acesta poate fi utilizat pentru:
- Stilul un element atunci când un utilizator trece cu mouse peste ea
- Style a vizitat și nevizitate link-uri diferit
- Stilul un element atunci când acesta devine focalizare
Mouse-ul peste Me
Sintaxă
Sintaxa pseudo-clase:
selector:pseudo-class {
property:value;
}Ancora pseudo-clase
Link-uri pot fi afișate în diferite moduri:
Exemplu
/* 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;
}
Încearcă - l singur » Note: a:hover trebuie să vină după a:link - a:visited a:link și a:visited a a:visited în definiția CSS, pentru a fi eficiente! a:active trebuie să vină după a:hover în definiția CSS pentru a fi eficiente! Numele Pseudo-clasă nu sunt sensibile la caz.
Pseudo-clase și clase CSS
Pseudo-clase pot fi combinate cu clase CSS:
Când plasați cursorul peste link-ul din exemplu, se va schimba culoarea:
Plasați cursorul pe <div>
Un exemplu folosind :hover pseudo-clasă pe un <div> Element:
CSS - Cu privire la :first-child Pseudo-clasa
:first-child pseudo-clasă se potrivește cu un element specificat care este primul copil al unui alt element.
Potriviți primul <p> elementul
În exemplul următor, selectorul se potrivește cu orice <p> element care este primul copil al oricărui element:
Potriviți primul <i> element în toate <p> elemente
În exemplul următor, selectorul potrivește primul <i> element din toate <p> elemente:
Se potrivesc toate <i> elemente în toate primul copil <p> elemente
În exemplul următor, selectorul se potrivește cu toate <i> elemente în <p> elementele care sunt primul copil al unui alt element:
CSS - Cu privire la :lang Pseudo-clasa
:lang pseudo-clasa vă permite să definiți reguli speciale pentru diferite limbi.
In exemplul de mai jos :lang definește ghilimele pentru <q> elemente cu lang="no" :
Exemplu
<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>
Încearcă - l singur » 
Mai multe exemple
Adăugați stiluri diferite de hyperlink - uri
Acest exemplu demonstrează modul în care să adăugați alte stiluri pentru a hyperlink-uri.
Utilizarea :focus
Acest exemplu demonstrează modul de utilizare a :focus să se :focus pseudo-clasă.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
Toate clasele CSS Pseudo
| Selector | Exemplu | descriere exemplu |
|---|---|---|
| :active | a:active | Selectează link-ul activ |
| :checked | input:checked | Selectează fiecare verificat <input> Element |
| :disabled | input:disabled | Selectează fiecare dezactivat <input> Element |
| :empty | p:empty | Selectează fiecare <p> element care nu are copii |
| :enabled | input:enabled | Selectează fiecare activat <input> Element |
| :first-child | p:first-child | Selectează fiecare <p> elemente care este primul copil al societății - mamă |
| :first-of-type | p:first-of-type | Selectează fiecare <p> element care este primul <p> elementul părinte |
| :focus | input:focus | Selectează <input> elementul care are focalizarea |
| :hover | a:hover | Selectează link-uri pe mouse-ul peste |
| :in-range | input:in-range | Selectează <input> elemente cu o valoare într - un interval specificat |
| :invalid | input:invalid | Selectează toate <input> elemente cu o valoare nevalidă |
| : lang( language ) | p: lang(it) | Selectează fiecare <p> Element cu o valoare a atributului lang incepand cu "it" |
| :last-child | p:last-child | Selectează fiecare <p> elemente care este ultimul copil al părintelui său |
| :last-of-type | p:last-of-type | Selectează fiecare <p> element care este ultimul <p> elementul mamă |
| :link | a:link | Selectează toate link-urile nevizitate |
| : not(selector) | : not(p) | Selectează fiecare element care nu este un <p> Element |
| :nth- child(n) | p:nth- child(2) | Selectează fiecare <p> element care este al doilea copil al părintelui său |
| :nth-last- child(n) | p:nth-last- child(2) | Selectează fiecare <p> element care este al doilea copil al său părinte, numărând de la ultimul copil |
| :nth-last-of- type(n) | p:nth-last-of- type(2) | Selectează fiecare <p> element care este al doilea <p> elementul mamă, numărând de la ultimul copil |
| :nth-of- type(n) | p:nth-of- type(2) | Selectează fiecare <p> element care este al doilea <p> elementul părinte |
| :only-of-type | p:only-of-type | Selectează fiecare <p> element care este singurul <p> elementul mamă |
| :only-child | p:only-child | Selectează fiecare <p> element care este singurul copil al părintelui său |
| :optional | input:optional | Selectează <input> elemente fără "required" atribut |
| :out-of-range | input:out-of-range | Selectează <input> elemente cu o valoare în afara unui interval specificat |
| :read-only | input:read-only | Selectează <input> elemente cu "readonly" atribut specificat |
| :read-write | input:read-write | Selectează <input> elemente fără "readonly" în "readonly" atribut |
| :required | input:required | Selectează <input> elemente cu un "required" atributul specificat |
| :root | root | Selectează elementul rădăcină al documentului |
| :target | #news:target | Selectează elementul curent #news activ (clicked on a URL containing that anchor name) a (clicked on a URL containing that anchor name) care (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selectează toate <input> elemente cu o valoare validă |
| :visited | a:visited | Selectează toate link-urile vizitate |
Toate CSS Pseudo Elemente
| Selector | Exemplu | descriere exemplu |
|---|---|---|
| ::after | p::after | Inserare conținut după fiecare <p> elementul |
| ::before | p::before | Inserare conținut înainte de fiecare <p> Element |
| ::first-letter | p::first-letter | Selectează prima literă a fiecărui <p> Element |
| ::first-line | p::first-line | Selectează prima linie a fiecărui <p> Element |
| ::selection | p::selection | Selectează porțiunea unui element care este selectat de către un utilizator |