Podcast CSS – 014: Pseudoelementy
.
Jeśli masz artykuł z treściami i chcesz, by pierwsza litera była znacznie większa, Jak to zrobić?
W CSS
możesz użyć pseudoelementu ::first-letter
, by osiągnąć takie 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 polega na dodawaniu lub kierowaniu na dodatkowy element bez konieczności dodawania dodatkowego kodu HTML.
To przykładowe rozwiązanie używa funkcji ::first-letter
,
jest jednym z wielu pseudoelementów.
Pełnią różne role,
W tej lekcji dowiesz się, które pseudoelementy są dostępne i jak z nich korzystać.
::before
i ::after
Zarówno
::before
i
::after
pseudoelementy tworzą element podrzędny wewnątrz elementu tylko wtedy, gdy zdefiniujesz właściwość content
.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
może być dowolnym ciągiem znaków.
– nawet pusty –
ale pamiętaj, że czytnik ekranu odczyta prawdopodobnie komunikat, który nie jest pustym ciągiem znaków.
Możesz dodać obraz url
,
co wstawi obraz
w oryginalnych wymiarach,
więc nie będzie można zmienić jej rozmiaru.
Możesz też wstawić
counter
Po utworzeniu elementu ::before
lub ::after
możesz go dowolnie zmieniać i bez ograniczeń.
Element ::before
lub ::after
możesz wstawić tylko do elementu, który akceptuje elementy podrzędne.
(elementy z drzewem dokumentu),
więc elementy takie jak <img />
, <video>
i <input>
nie będą działać.
::first-letter
Ten pseudoelement poznaliśmy na początku lekcji.
Pamiętaj, że nie wszystkie właściwości CSS mogą być używane do kierowania
::first-letter
Dostępne właściwości:
color
- Usługi typu
background
(np.background-image
) - Usługi typu
border
(np.border-color
) float
- Usługi
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
::first-line
pseudoelement pozwala określić styl pierwszego wiersza tekstu
tylko jeśli element z zastosowanym ::first-line
ma wartość display
równą block
,
inline-block
, list-item
, table-caption
lub table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
Podobnie jak pseudoelement ::first-letter
,
jest tylko podzbiór właściwości CSS, których możesz użyć:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::backdrop
Jeśli jeden z elementów wyświetla się w trybie pełnoekranowym,
takich jak <dialog>
lub <video>
,
możesz dostosować styl tła, czyli przestrzeni między elementem a pozostałą częścią strony, za pomocą opcji
Pseudoelement ::backdrop
:
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
pseudoelement umożliwia zmianę stylu punktu lub numeru elementu listy lub strzałki 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ługiwanych jest tylko niewielki podzbiór właściwości CSS:
color
content
white-space
font
miejsca zakwaterowania- Usługi
animation
itransition
Symbol znacznika możesz zmienić za pomocą właściwości content
. W ten sposób możesz na przykład ustawić znaki plusa i minusa dla zamkniętych i pustych stanów elementu <summary>
.
::selection
::selection
pseudoelementu pozwala określić styl wybranego tekstu.
::selection {
background: green;
color: white;
}
Tego pseudoelementu można użyć do określenia stylu całego zaznaczonego tekstu, tak jak w przykładzie powyżej. Aby uzyskać bardziej szczegółowy styl wyboru, możesz też go używać w połączeniu z innymi selektorami.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Podobnie jak w przypadku innych pseudoelementów, dozwolona jest tylko część właściwości CSS:
color
background-color
, ale niebackground-image
text
miejsca zakwaterowania
::placeholder
Możesz dodać wskazówkę pomocniczą do elementów formularzy,
np. <input>
z atrybutem placeholder
.
::placeholder
pseudoelementu pozwala określić styl tekstu.
input::placeholder {
color: darkcyan;
}
Pole ::placeholder
obsługuje tylko podzbiór reguł CSS:
color
background
miejsca zakwaterowaniafont
miejsca zakwaterowaniatext
miejsca zakwaterowania
::cue
Ostatnią prezentację o pseudoelementach jest
::cue
pseudoelement.
Pozwala to dostosować styl wskazówek WebVTT,
czyli podpisy elementu <video>
.
Selektor możesz też przekazać do elementu ::cue
,
co pozwala nadać styl określonym elementom wewnątrz napisów.
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 elementów nie są pseudoelementami?
::pencil
:active
::first-paragraph
::after
::marker
::before
Pseudoelementy można znaleźć w pliku HTML.