Pseudoelementy

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

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