Pseudoklasy CSS

What are pseudo-classes?

Pseudo-classes are used to define the special state of elements.

For example, it can be used for:

  • Set the style when the mouse is hovering over the element
  • Set different styles for visited and unvisited links
  • Set the style when the element is focused
Hover your mouse over me

Syntax

Syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Anchor pseudo-class

Links can be displayed in different ways:

Przykład

/* Unvisited link */
a:link {
  color: #FF0000;
}
/* Visited link */
a:visited {
  color: #00FF00;
}
/* Hovered link */
a:hover {
  color: #FF00FF;
}
/* Selected link */
a:active {
  color: #0000FF;
}

Spróbuj sam

Note:a:hover Must be in the CSS definition a:link and a:visited Then they will take effect!a:active Must be in the CSS definition a:hover Only then they will take effect! The pseudo-class name is case-insensitive.

Pseudo-classes and CSS classes

Pseudo-classes can be used with CSS classes:

When you hover over the link in the example, it changes color:

Przykład

a.highlight:hover {
  color: #ff0000;
}

Spróbuj sam

Hover over <div>

Using on <div> element :hover Pseudo-classes instance:

Przykład

div:hover {
  background-color: blue;
}

Spróbuj sam

Prosty tooltip najedź

Najedź na element <div>, aby wyświetlić element <p> (podobnie jak efekt tooltipa):

Najedź na mnie, aby wyświetlić element <p>.

Heh, jestem tutaj!

Przykład

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Spróbuj sam

CSS - pseudoklasa :first-child

:first-child Pseudoklasy dopasowują do określonego elementu: jest to pierwszy dziecko innego elementu.

Pasuje do pierwszego elementu <p>

W poniższym przykładzie, selektor pasuje do każdego elementu <p>, który jest pierwszym dzieckiem dowolnego elementu:

Przykład

p:first-child {
  color: blue;
}

Spróbuj sam

Pasuje do pierwszego elementu <i> w każdym elemencie <p>

W poniższym przykładzie, selektor pasuje do pierwszego elementu <i> w każdym elemencie <p>:

Przykład

p i:first-child {
  color: blue;
}

Spróbuj sam

Pasuje do wszystkich elementów <i> w pierwszym elemencie <p>

W poniższym przykładzie, selektor pasuje do wszystkich elementów <i> w elemencie <p>, który jest pierwszym dzieckiem innego elementu:

Przykład

p:first-child i {
  color: blue;
}

Spróbuj sam

CSS - pseudoklasa :lang

:lang pseudoklasy pozwalają na zdefiniowanie specjalnych reguł dla różnych języków.

W poniższym przykładzie,:lang Zdefiniuj znaki cudzysłów dla elementów <q> o atrybucie lang="en":

Przykład

<html>
<head>
<style>
q:lang(en) {
  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.
Użyj :focus
Ten przykład pokazuje, jak używać pseudoklasy :focus.

Wszystkie CSS pseudoklasy

Selektor Przykład Opis przykładu
:active a:active Wybierz aktywny link.
:checked input:checked Wybierz każdy zaznaczony element <input>.
:disabled input:disabled Wybierz każdy wyłączony element <input>.
:empty p:empty Wybierz każdy element <p> bez podelementów.
:enabled input:enabled Wybierz każdy włączony element <input>.
:first-child p:first-child Wybierz każdy element <p>, który jest pierwszym dzieckiem swojego rodzica.
:first-of-type p:first-of-type Wybierz każdy element <p>, który jest pierwszym elementem swojego rodzica.
:focus input:focus Wybierz elementy <input>, które są w stanie aktywnego skupienia.
:hover a:hover Wybierz linki, nad którymi znajduje się kursor myszy.
:in-range input:in-range Wybierz elementy <input>, które mają wartości w指定范围内.
:invalid input:invalid Wybierz wszystkie elementy <input>, które mają nieważne wartości.
:lang(language) p:lang(it) Wybierz każdy element <p>, którego wartość atrybutu lang zaczyna się od "it".
:last-child p:last-child Wybierz każdy element <p>, który jest ostatnim dzieckiem swojego rodzica.
:last-of-type p:last-of-type Wybierz każdy element <p>, który jest ostatnim elementem swojego rodzica.
:link a:link Wybierz wszystkie nieodwiedzone linki.
:not(selector) :not(p) Wybierz każdy element, który nie jest elementem <p>.
:nth-child(n) p:nth-child(2) Wybierz każdy element <p>, który jest drugim dzieckiem swojego rodzica.
:nth-last-child(n) p:nth-last-child(2) Wybierz każdy element <p>, który jest drugim dzieckiem swojego rodzica, licząc od ostatniego potomka.
:nth-last-of-type(n) p:nth-last-of-type(2) Wybierz każdy element <p>, który jest drugim dzieckiem swojego rodzica, licząc od ostatniego potomka.
:nth-of-type(n) p:nth-of-type(2) Wybierz każdy element <p>, który jest drugim dzieckiem swojego rodzica.
:only-of-type p:only-of-type Wybierz każdy element <p>, który jest jedynym elementem swojego rodzica.
:only-child p:only-child Wybierz element <p>, który jest jedynym dzieckiem swojego rodzica.
:optional input:optional Wybierz elementy <input> bez atrybutu "required".
:out-of-range input:out-of-range Wybierz elementy <input> z wartością poza określonym zakresem.
:read-only input:read-only Wybierz elementy <input> oznaczone atrybutem "readonly".
:read-write input:read-write Wybierz elementy <input> bez atrybutu "readonly".
:required input:required Wybierz elementy <input> oznaczone atrybutem "required".
:root root Wybierz korzen elementu.
:target #news:target Wybierz bieżący element #news (kliknięcie URL zawierającego nazwę tego atrybutu).
:valid input:valid Wybierz wszystkie elementy <input> z poprawnymi wartościami.
:visited a:visited Wybierz wszystkie odwiedzone linki.

Wszystkie CSS pseudo-元素的

Selektor Przykład Opis przykładu
::after p::after Wstaw treść po każdym elemencie <p>.
::before p::before Wstaw treść przed każdym elementem <p>.
::first-letter p::first-letter Wybierz pierwszą literę każdego elementu <p>.
::first-line p::first-line Wybierz pierwszą linię każdego elementu <p>.
::selection p::selection Wybierz część elementu wybranego przez użytkownika.