Podcast CSS – odcinek 014: Pseudoelementy
Jeśli masz artykuł, w którym pierwsza litera jest znacznie większa od pozostałych, jak to zrobić?
W CSS możesz użyć pseudoelementu ::first-letter
, aby uzyskać tego typu 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 to coś w rodzaju dodatkowego elementu lub elementu kierowanego, który można dodać bez konieczności dodawania kodu HTML.
To przykładowe rozwiązanie, które używa znacznika ::first-letter
, jest jednym z wielu pseudoelementów.
Mają one różne role. W tym samouczku dowiesz się, jakie pseudoelementy są dostępne i jak z nich korzystać.
::before
i ::after
Zarówno pseudoelement ::before
, jak i ::after
tworzą element podrzędny wewnątrz elementu tylko wtedy, gdy zdefiniujesz właściwość content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
Wartość content
może być dowolnym ciągiem znaków, nawet pustym. Należy jednak pamiętać, że wszystko inne niż pusty ciąg znaków będzie prawdopodobnie odczytywane przez czytnik ekranu.
Możesz dodać obraz url
,
który wstawi obraz w jego oryginalnych wymiarach,
więc nie będzie można zmienić jego rozmiaru.
Możesz też wstawić counter
.
Po utworzeniu elementu ::before
lub ::after
możesz dowolnie go stylizować.
Element ::before
lub ::after
możesz wstawić tylko do elementu, który akceptuje elementy podrzędne (elementy z drzewem dokumentu). Elementy takie jak <img />
, <video>
i <input>
nie będą działać.
::first-letter
Ten pseudoelement pojawił się na początku lekcji.
Pamiętaj, że podczas kierowania reklam ::first-letter
nie wszystkie usługi porównywania cen są dostępne.
Dostępne usługi:
color
background
usługi (np.background-image
)border
usługi (np.border-color
)float
font
usługi (np.font-size
ifont-weight
)- właściwości tekstowe (np.
text-decoration
iword-spacing
);
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
Pseudoelement ::first-line
pozwala nadać styl pierwszej linii tekstu tylko wtedy, gdy element z atrybutem ::first-line
ma wartość atrybutu display
równą 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 używać tylko podzbioru właściwości CSS:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::backdrop
Jeśli masz element wyświetlany w trybie pełnoekranowym,
taki jak <dialog>
lub <video>
,
możesz sformatować tło – czyli przestrzeń między elementem a resztą strony – za pomocą pseudoelementu ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
Pseudoelement ::marker
pozwala ustawić styl wypunktowania lub numeru elementu listy albo strzałkę elementu <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ługiwana jest tylko niewielka podgrupa właściwości CSS:
color
content
white-space
font
miejsca zakwaterowania- Właściwości
animation
itransition
Możesz zmienić symbol znacznika, korzystając z właściwości content
. Możesz na przykład ustawić symbol plusa i minusa dla zamkniętego i pustego stanu elementu <summary>
.
::selection
Pseudoelement ::selection
pozwala określić styl wybranego tekstu.
::selection {
background: green;
color: white;
}
Ten pseudoelement może służyć do stylizacji całego zaznaczonego tekstu, jak w poniższym przykładzie. Możesz go też używać w połączeniu z innymi selektorami, aby uzyskać bardziej szczegółowy styl wybierania.
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 formularza możesz dodać podpowiedź, na przykład <input>
z atrybutem placeholder
.
Pseudoelement ::placeholder
pozwala określić styl tekstu.
input::placeholder {
color: darkcyan;
}
::placeholder
obsługuje tylko podzbiór reguł CSS:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::cue
Ostatnim pseudoelementem w tej prezentacji jest pseudoelement ::cue
.
Umożliwia to stylizowanie cue-ów WebVTT, czyli napisów elementu <video>
.
Możesz też przekazać selektor do ::cue
, co pozwoli Ci nadać styl określonym elementom w ramach nagłówka.
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 tych elementów nie są pseudoelementami?
::before
::after
::pencil
::first-paragraph
:active
::marker
Elementy pseudo można znaleźć w pliku HTML.