Jakie są Pseudoklasy?
Pseudo klasy jest używany do zdefiniowania szczególny stan elementu.
Na przykład, może on być stosowany do:
- Styl elementu, gdy użytkownik najedzie myszą nim
- Styl od stanów różnie
- Styl elementu, gdy robi się skupić
Mouse Over Me
Składnia
Składnia pseudo-klasy:
selector:pseudo-class {
property:value;
}Kotwica Pseudoklasy
Linki mogą być wyświetlane w różny sposób:
Przykład
/* 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;
}
Spróbuj sam "  | Uwaga: a:hover muszą pochodzić po a:link oraz a:visited ! Definicją CSS, aby być skuteczne a:active musi pochodzić po a:hover w definicji CSS, aby być skuteczne!Nazwy Pseudo-klasy nie są wrażliwe na wielkość liter. |
|---|
Pseudo-klasy i klasy CSS
Pseudoklasy można łączyć z klas CSS:
Po najechaniu na link w tym przykładzie, że zmieni kolor:
Najedź na <div>
Przykładem używając :hover pseudo-klasę na <div> element:
CSS - The :first-child Pseudo-klasa
:first-child Pseudo-klasa pasuje do określonego elementu, który jest pierwszym dzieckiem innego elementu.
Dopasuj pierwszy <p> elementu
W poniższym przykładzie, selektor pasuje dowolny <p> element, który jest pierwszym dzieckiem dowolnego elementu:
Dopasuj pierwsze <i> elementem wszystkich <p> elementy
W poniższym przykładzie, selektor pasuje pierwsza <i> elementem wszystkich <p> elementów:
Pasują do wszystkich <i> elementów we wszystkich pierwszego dziecka <p> elementy
W poniższym przykładzie, selektor pasuje do wszystkich <i> elementy <p> elementów, które są pierwszym dzieckiem innego elementu:
CSS - w :lang Pseudo-klasa
:lang Pseudo-klasa pozwala na definiowanie specjalnych reguł dla różnych języków.
W poniższym przykładzie :lang definiuje cudzysłowów <q> elementów z lang="no" :
Przykład
<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>
Spróbuj sam " 
Więcej przykładów
Dodaj różne style do hiperłączy
Ten przykład pokazuje, jak dodać inne style do hiperłączy.
Zastosowanie :focus
Ten przykład pokazuje, jak używać :focus pseudo-klasy.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
Wszystkie klasy CSS Pseudo
| Selektor | Przykład | Przykład opis |
|---|---|---|
| :active | a:active | Wybiera aktywny link |
| :checked | input:checked | Wybiera każdy sprawdzony <input> element, |
| :disabled | input:disabled | Wybór każdego niepełnosprawnego <input> element, |
| :empty | p:empty | Wybiera każdy <p> element, który nie ma dzieci |
| :enabled | input:enabled | Wybiera co pozwoliło <input> element, |
| :first-child | p:first-child | Wybiera co <p> elementy, które jest pierwszym dzieckiem swojego rodzica |
| :first-of-type | p:first-of-type | Wybiera każdy <p> element, który jest pierwszy <p> element jego rodzica |
| :focus | input:focus | Wybiera <input> element, który ma fokus |
| :hover | a:hover | Wybór linków na myszy nad |
| :in-range | input:in-range | Wybiera <input> elementów, których wartość w określonym zakresie |
| :invalid | input:invalid | Wybiera wszystkie <input> elementów z nieprawidłową wartością |
| :lang(language) | p:lang(it) | Wybiera każdy <p> element z atrybutem lang wartości zaczynające się od "niego" |
| :last-child | p:last-child | Wybiera co <p> elementy, które jest ostatnim dzieckiem swojego rodzica |
| :last-of-type | p:last-of-type | Wybiera każdy <p> element, który jest ostatnią <p> element jego rodzica |
| :link | a:link | Wybiera wszystkie linki nieodwiedzonych |
| :not(selector) | :not(p) | Wybiera każdy element, który nie jest <p> Element |
| :nth-child(n) | p:nth-child(2) | Wybiera każdy <p> element, który jest drugim dzieckiem swojego rodzica |
| :nth-last-child(n) | p:nth-last-child(2) | Wybiera każdy <p> element, który jest drugim dzieckiem swojego rodzica, licząc od ostatniego dziecka |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wybiera każdy <p> element, który jest drugi <p> element swojego rodzica, licząc od ostatniego dziecka |
| :nth-of-type(n) | p:nth-of-type(2) | Wybiera każdy <p> element, który jest drugi <p> element jego rodzica |
| :only-of-type | p:only-of-type | Wybiera każdy <p> element, który jest jedynym <p> element jego rodzica |
| :only-child | p:only-child | Wybiera każdy <p> element, który jest jedynym dzieckiem swojego rodzica |
| :optional | input:optional | Wybiera <input> elementów bez "required" atrybutu |
| :out-of-range | input:out-of-range | Wybiera <input> elementy o wartości poza określonym zakresie |
| :read-only | input:read-only | Wybiera <input> Elementy z "readonly" Określony atrybut |
| :read-write | input:read-write | Wybiera <input> elementów bez "readonly" atrybutu |
| :required | input:required | Wybiera <input> elementy o "required" atrybutu określonego |
| :root | root | Wybiera element główny dokumentu |
| :target | #news:target | Wybiera bieżący aktywny element #news (kliknął adresu URL zawierającego tę nazwę kotwicy) |
| :valid | input:valid | Wybiera wszystkie <input> elementów z poprawną wartością |
| :visited | a:visited | Wybiera wszystkie odwiedzonych linków |
Wszystkie elementy Pseudo CSS
| Selektor | Przykład | Przykład opis |
|---|---|---|
| ::after | p::after | Wstaw zawartość po każdym <p> elementu |
| ::before | p::before | Wstaw zawartość przed każdym <p> elementu |
| ::first-letter | p::first-letter | Wybiera pierwszą literę każdego <p> elementu |
| ::first-line | p::first-line | Zaznacza pierwszy wiersz każdego <p> elementu |
| ::selection | p::selection | Wybiera część elementu, który jest wybierany przez użytkownika |