Pseudoelementy

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 i font-weight)
• właściwości tekstu (np. text-decoration i word-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 zakwaterowania
• font miejsca zakwaterowania
• text 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 zakwaterowania
• animation i transition 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 nie background-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 zakwaterowania
• font miejsca zakwaterowania
• text 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