Podcast o CSS – 014: Pseudoelementy
Jak to zrobić, jeśli w artykule z treścią jego pierwsza litera była znacznie większa
W CSS można użyć pseudoelementu ::first-letter
, aby uzyskać tego rodzaju szczegóły projektu.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Pseudoelement jest jak dodawanie lub kierowanie na kolejny element bez konieczności dodawania kodu HTML.
To przykładowe rozwiązanie, w którym wykorzystano właściwość ::first-letter
, jest jednym z wielu pseudoelementów.
Mają one różne role,
a z tej lekcji dowiesz się, jakie pseudoelementy są dostępne i jak z nich korzystać.
::before
i ::after
Zarówno pseudoelementy ::before
, jak i ::after
tworzą element podrzędny w elemencie tylko wtedy, gdy zdefiniujesz właściwość content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
Pole content
może być dowolnym ciągiem znaków – nawet pustym – ale pamiętaj, że czytnik ekranu prawdopodobnie odczyta coś innego niż pusty.
Możesz dodać obraz url
, który spowoduje wstawienie go w jego pierwotnych wymiarach i wtedy nie będzie można zmienić jego rozmiaru.
Możesz też wstawić counter
.
Po utworzeniu elementu ::before
lub ::after
możesz dowolnie zmieniać jego styl bez żadnych ograniczeń.
Elementy ::before
lub ::after
można wstawić tylko do elementu, który akceptuje elementy podrzędne (elementy z drzewem dokumentu), więc takie elementy jak <img />
, <video>
i <input>
nie będą działać.
::first-letter
Na początku lekcji napotkaliśmy ten pseudoelement.
Pamiętaj, że nie wszystkie właściwości CSS można stosować do kierowania na stronę ::first-letter
.
Dostępne właściwości to:
color
- Właściwości
background
(np.background-image
) - Właściwości
border
(np.border-color
) float
- Właściwości
font
(np.font-size
ifont-weight
) - właściwości tekstu (np.
text-decoration
iword-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
pseudoelement ::first-line
umożliwia zmianę stylu pierwszego wiersza tekstu tylko wtedy, gdy element z zastosowaną funkcją ::first-line
ma wartość display
o wartości block
, inline-block
, list-item
, table-caption
lub table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Podobnie jak w przypadku pseudoelementu ::first-letter
, możesz stosować tylko podzbiór właściwości CSS:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::backdrop
Jeśli masz element wyświetlany w trybie pełnoekranowym, np. <dialog>
lub <video>
, możesz określić styl tła – przestrzeni między elementem a resztą strony – za pomocą pseudoelementu ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
Pseudoelement ::marker
pozwala zmienić styl punktora lub numeru elementu listy albo strzałki w elemencie <summary>
.
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
W przypadku ::marker
obsługiwany jest tylko niewielki podzbiór właściwości CSS:
color
content
white-space
font
miejsca zakwaterowaniaanimation
itransition
usług
Symbol znacznika możesz zmienić za pomocą właściwości content
. W ten sposób możesz na przykład ustawić znak plusa i minusa dla zamkniętych i pustych stanów elementu <summary>
.
::selection
Pseudoelement ::selection
pozwala określić styl wyglądu zaznaczonego tekstu.
::selection {
background: green;
color: white;
}
Ten pseudoelement może służyć do określania stylu całego zaznaczonego tekstu, jak w przykładzie powyżej. Możesz go też użyć w połączeniu z innymi selektorami, aby uzyskać bardziej szczegółowy styl.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Podobnie jak w przypadku innych pseudoelementów, dozwolony jest tylko podzbiór właściwości CSS:
color
background-color
, ale niebackground-image
text
miejsca zakwaterowania
::placeholder
Do elementów formularzy, takich jak <input>
, możesz dodać wskazówkę pomocniczą.placeholder
Pseudoelement ::placeholder
umożliwia określenie stylu tekstu.
input::placeholder {
color: darkcyan;
}
Element ::placeholder
obsługuje tylko podzbiór reguł CSS:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::cue
Na koniec tej prezentacji o pseudoelementach omawiamy pseudoelementy ::cue
.
Pozwala to nadać styl wskazówek WebVTT, które są podpisami elementu <video>
.
Możesz też przekazać selektor do elementu ::cue
, który umożliwia ustawienie stylu określonych elementów wewnątrz podpisu.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o pseudoelementach
Które z poniższych nie są pseudoelementami?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Pseudoelementy można znaleźć w pliku HTML.