Latest web development tutorials

CSS pseudoelementy

CSS pseudoelement służy dodać kilka efektów specjalnych selektorów.

gramatyka

Pseudo-element składni:

selector:pseudo-element {property:value;}

Klasy CSS mogą również korzystać z pseudo-elementy:

selector.class:pseudo-element {property:value;}

: First-line pseudo-element

"Pierwsza linia" pseudo-element służy do utworzenia specjalnego stylu do pierwszej linii tekstu.

W poniższym przykładzie, przeglądarka będzie opierać się na "pierwszej linii" pseudoelementem w stylu pierwszej linii tekstu formatu elementy p:

Przykłady

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Spróbuj »

Uwaga: "pierwszego rzutu" pseudo-element może być używany tylko do elementów blokowych.

UWAGA: Następujące właściwości mogą być stosowane do "pierwszego rzutu" pseudo-elementu:

  • właściwości czcionki
  • właściwości kolorów
  • właściwości tła
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • jasny

: First-letter pseudoelement

"Pierwsza litera" pseudo-element służy do utworzenia specjalnego stylu pierwszej literze tekstu:

Przykłady

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Spróbuj »

Uwaga: "first-letter" pseudo-element może być używany tylko do elementów blokowych.

UWAGA: Następujące właściwości mogą być stosowane do "first-letter" pseudo-elementu:

  • właściwości czcionki
  • właściwości kolorów
  • właściwości tła
  • właściwości marginesów
  • właściwości wypełniające
  • właściwości graniczne
  • text-decoration
  • vertical-align (tylko jeśli "pływak" jest "none")
  • text-transform
  • line-height
  • pływak
  • jasny

Pseudoelementy i klasy CSS

Pseudoelementy można łączyć z klas CSS

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

Powyższy przykład sprawi, że wszystkie klasy jako pierwsza litera artykule ustęp zmienia kolor na czerwony.

Wiele Pseudoelementy

Wiele pseudoelementów mogą być łączone w celu użycia.

W poniższym przykładzie, pierwszy akapit listu będzie wyświetlany w kolorze czerwonym, rozmiar czcionki jest xx-large. Pierwsza linia reszty tekstu będzie niebieskie, a małe litery kapitałowych.

Pozostałe ustępy tekstu w domyślny rozmiar czcionki i koloru do wyświetlania:

Przykłady

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Spróbuj »

CSS -: Przed pseudoelementem

": Przed" pseudo-element można wstawić nową zawartość w przedniej części zawartości tego elementu.

Poniższy przykład aby wstawić obraz z przodu każdego elementu <h1>:

Przykłady

h1:before
{
content:url(smiley.gif);
}

Spróbuj »

CSS -: po pseudoelementem

"Po" pseudo-element można wstawić nową treść po zawartości elementu.

Poniższe przykłady wstawić obraz po każdym elemencie <h1>:

Przykłady

h1:after
{
content:url(smiley.gif);
}

Spróbuj »

Wszystko CSS Pseudoklasy / elementy

selektor przykład Przykład pokazuje
: link a:link Zaznacz wszystkie linki nieodwiedzonych
: visited a:visited Zaznacz wszystkie odwiedzonych linków
: aktywny a:active Select jest aktywnym linkiem
: hover a:hover Umieść kursor myszy na stan łącza
koncentrująca input:focus Po wybraniu elementu wejściowego ma fokus
: First-letter p:first-letter Wybierz pierwszą literę każdego elementu <p>
: First-line p:first-line Wybierz pierwszą linię każdego elementu <p>
: First-child p:first-child <] P> selektor elementu dopasowuje dowolny pierwiastek należący do pierwszego elementu podrzędnego
: przed p:before Wstaw zawartość przed każdym elemencie <p>
: po p:after Wstaw zawartość po każdym <p> Element
: Lang (język) p:lang(it) Wybór atrybutu lang <p> element wartości początkowej