Pseudoelementy

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

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 nie background-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 zakwaterowania
• font miejsca zakwaterowania
• text 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