Najnowsze tutoriale tworzenie stron internetowych
 

CSS Pseudoelementy

❮ Poprzedni Następny rozdział ❯

Jakie są Pseudoelementy?

CSS pseudo-element jest używany do stylu określone części elementu.

Na przykład, może on być stosowany do:

  • Styl pierwszą literę lub linię, elementu
  • Przed włożeniem treści lub po zawartości elementu

Składnia

Składnia pseudoelementów:

selector::pseudo-element {
    property:value;
}
Uwaga Zwróć uwagę na podwójne notacji okrężnicy - ::first-line w porównaniu :first-line

Podwójny dwukropek zastępuje zapis jednego grubego dla pseudoelementów w CSS3. Była to próba z W3C odróżnić pseudo-klas i pseudo-elementów.

Składnia pojedynczej okrężnicy wykorzystano zarówno dla pseudo-klasy i pseudo-elementy w CSS2 i CSS1.

Dla zachowania kompatybilności wstecznej, składnia jednego grubego jest do zaakceptowania dla CSS2 i CSS1 pseudoelementów.

::first-line Pseudo-element

::first-line pseudo-element służy do dodawania specjalny styl do pierwszej linii tekstu.

Poniższy przykład formatuje pierwszą linię tekstu we wszystkich <p> elementów:

Przykład

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Spróbuj sam "

Uwaga: ::first-line pseudo-element może być stosowana tylko do elementów blokowych.

Następujące właściwości dotyczą ::first-line pseudoelementem:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter pseudo-element

::first-letter pseudo-element służy do dodawania specjalny styl do pierwszej litery tekstu.

Poniższy przykład formatuje pierwszą literę tekstu we wszystkich <p> elementów:

Przykład

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Spróbuj sam "

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

Następujące właściwości dotyczą ::first-letter pseudo- element:

  • font właściwości
  • color właściwości
  • background właściwości
  • margin właściwości
  • padding właściwości
  • border właściwości
  • text-decoration
  • vertical-align (tylko jeśli "float" jest "none" )
  • text-transform
  • line-height
  • float
  • clear

Pseudoelementy i klasy CSS

Pseudoelementy można łączyć z klas CSS

Przykład

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
Spróbuj sam "

Powyższy przykład wyświetli pierwszą literę ustępów z class="intro" , w kolorze czerwonym, a w większym rozmiarze.

Wiele Pseudoelementy

Kilka pseudoelementy mogą być łączone.

W poniższym przykładzie, pierwsza litera akapitu będzie czerwona, w rozmiarze czcionki xx-large. Reszta pierwszej linii będzie niebieski, a small-caps. Reszta ustępu będzie domyślny rozmiar czcionki i kolor:

Przykład

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Spróbuj sam "

CSS - The ::before pseudoelement

::before pseudo element może być używany do wprowadzania pewnej treści przed zawartością elementu.

Poniższy przykład wstawia obraz przed zawartości poszczególnych <h1> element:

Przykład

h1::before {
    content: url(smiley.gif);
}
Spróbuj sam "

CSS - The ::after pseudoelement

::after pseudo element może być używany do wprowadzania pewnej treści po zawartości elementu.

Poniższy przykład wstawia zdjęcie po zmianie zawartości każdego <h1> element:

Przykład

h1::after {
    content: url(smiley.gif);
}
Spróbuj sam "

CSS - The ::selection Pseudo-elementowa

::selection pseudoelement pasuje do części elementu, który jest wybrany przez użytkownika.

Następujące właściwości CSS mogą być stosowane do ::selection : color , background , cursor , a outline .

Poniższy przykład powoduje, że wybrany czerwony tekst na żółtym tle:

Przykład

::selection {
    color: red;
    background: yellow;
}
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »

Wszystkie elementy Pseudo CSS

Selektor Przykład Przykład opis
::after p::after Włóż coś po zawartości każdego elementu <p>
::before p::before Włóż coś przed zawartości poszczególnych <p> elementu
::first-letter p::first-letter Wybiera pierwszą literę każdego <p> elementu
::first-line p::first-line Zaznacza pierwszy wiersz każdego <p> elementu
::selection p::selection Wybiera część elementu, który jest wybierany przez użytkownika

Wszystkie klasy CSS Pseudo

Selektor Przykład Przykład opis
:active a:active Wybiera aktywny link
:checked input:checked Wybiera każdy sprawdzony <input> element,
:disabled input:disabled Wybór każdego niepełnosprawnego <input> element,
:empty p:empty Wybiera każdy <p> element, który nie ma dzieci
:enabled input:enabled Wybiera co pozwoliło <input> element,
:first-child p:first-child Wybiera co <p> elementy, które jest pierwszym dzieckiem swojego rodzica
:first-of-type p:first-of-type Wybiera każdy <p> element, który jest pierwszy <p> element jego rodzica
:focus input:focus Wybiera <input> element, który ma fokus
:hover a:hover Wybór linków na myszy nad
:in-range input:in-range Wybiera <input> elementów, których wartość w określonym zakresie
:invalid input:invalid Wybiera wszystkie <input> elementów z nieprawidłową wartością
:lang(language) p:lang(it) Wybiera każdy <p> element z atrybutem lang wartości zaczynające się od "it"
:last-child p:last-child Wybiera co <p> elementy, które jest ostatnim dzieckiem swojego rodzica
:last-of-type p:last-of-type Wybiera każdy <p> element, który jest ostatnią <p> element jego rodzica
:link a:link Wybiera wszystkie linki nieodwiedzonych
:not(selector) :not(p) Wybiera każdy element, który nie jest <p> Element
:nth-child(n) p:nth-child(2) Wybiera każdy <p> element, który jest drugim dzieckiem swojego rodzica
:nth-last-child(n) p:nth-last-child(2) Wybiera każdy <p> element, który jest drugim dzieckiem swojego rodzica, licząc od ostatniego dziecka
:nth-last-of-type(n) p:nth-last-of-type(2) Wybiera każdy <p> element, który jest drugi <p> element swojego rodzica, licząc od ostatniego dziecka
:nth-of-type(n) p:nth-of-type(2) Wybiera każdy <p> element, który jest drugi <p> element jego rodzica
:only-of-type p:only-of-type Wybiera każdy <p> element, który jest jedynym <p> element jego rodzica
:only-child p:only-child Wybiera każdy <p> element, który jest jedynym dzieckiem swojego rodzica
:optional input:optional Wybiera <input> elementów bez "required" atrybutu
:out-of-range input:out-of-range Wybiera <input> elementy o wartości poza określonym zakresie
:read-only input:read-only Wybiera <input> Elementy z "readonly" Określony atrybut
:read-write input:read-write Wybiera <input> elementów bez "readonly" atrybutu
:required input:required Wybiera <input> elementy o "required" atrybutu określonego
:root root Wybiera element główny dokumentu
:target #news:target Wybiera bieżącą aktywną #news element (kliknął adresu URL zawierającego tę nazwę kotwicy)
:valid input:valid Wybiera wszystkie <input> elementów z poprawną wartością
:visited a:visited Wybiera wszystkie odwiedzonych linków

❮ Poprzedni Następny rozdział ❯