CSS pszeudo-elemek

Tartalomjegyzék

Mik azok a pszeudoelemek?

A CSS pszeudoelemet az elem meghatározott részeinek stílusához használjuk.

Például a következőkre használható:

Stíluszzon egy elem első betűjét vagy sorát
Tartalom beszúrása egy elem tartalma elé vagy után

Szintaxis

A pszeudoelemek szintaxisa:

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

Az ::első soros Pszeudo-elem

A ::first-line pszeudoelem egy speciális stílus hozzáadására szolgál a szöveg első sorához.

A következő példa formázza a szöveg első sorát az összes <p>-ben elemek:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Megjegyzés: A ::first-line pszeudoelem csak blokkszintre alkalmazható elemeket.

A következő tulajdonságok érvényesek a ::first-line-ra pszeudoelem:

betűtípus tulajdonságait
szín tulajdonságai
háttértulajdonságok
szóköz
betűtávolságok
szöveg-dekoráció
függőleges igazítás
szöveg-átalakítás
vonalmagasság
egyértelmű

Vegye észre a kettős kettőspontos jelölést - ::first-line versus :first-line

A kettős kettőspont váltotta fel az egy kettőspontot a pszeudoelemek jelölése a CSS3-ban. Ez egy kísérlet volt a W3C-től különbséget tenni a pszeudoosztályok között és pszeudoelemek.

Az egy kettőspontos szintaxist használtuk a CSS2 és CSS1 pszeudoosztályaihoz és pszeudoelemeihez egyaránt.

Azért visszafelé kompatibilitás, az egy kettőspontos szintaxis elfogadható a CSS2 és CSS1 esetében pszeudo-elemek.

Az ::első betűs Pszeudo-elem

A ::first-letter pszeudoelem arra szolgál, hogy különleges stílust adjon az elsőhöz egy szöveg betűje.

A következő példa a szöveg első betűjét formázza az összes <p>-ben elemek:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

Megjegyzés: A ::first-letter pszeudoelem csak blokkszintre alkalmazható elemeket.

A következő tulajdonságok érvényesek a ::first-letter pszeudoelemre:

betűtípus tulajdonságait
szín tulajdonságai
háttértulajdonságok
margó tulajdonságai
párnázás tulajdonságai
határtulajdonságok
szöveg-dekoráció
függőleges igazítás (csak akkor, ha a "float" értéke "nincs")
szöveg-átalakítás
vonalmagasság
úszó
egyértelmű

Pszeudoelemek és HTML osztályok

A pszeudoelemek kombinálhatók HTML osztályokkal:

Példa

p.intro::first-letter {
  color: #ff0000;
  
font-size: 200%;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

</body>
</html>

A fenti példa a bekezdések első betűjét jeleníti meg a class="intro", in piros és nagyobb méretben.

Több pszeudo-elem

Több pszeudoelem is kombinálható.

A következő példában a bekezdés első betűje piros lesz xx nagy betűméret. Az első sor többi része kék lesz, és be kis sapkák. A bekezdés többi része az alapértelmezett betűméret és -szín lesz:

Példa

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

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

CSS - A ::before pszeudo-elem

A ::before pszeudoelem használható bizonyos tartalom beszúrására egy elem tartalma elé.

A következő példa egy képet szúr be az egyes <h1> elemek tartalma elé:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS - Az ::after Pseudo-elem

A ::after pszeudoelem használható bizonyos tartalom beszúrására egy elem tartalma után.

A következő példa minden <h1> elem tartalma után egy képet szúr be:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS - A ::marker pszeudo-elem

A ::marker pszeudoelem kiválasztja a listaelemek jelölői.

A következő példa stílusozza a listaelemek jelölőit:

Példa

::marker { 
  color: red;
  font-size: 23px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>

CSS - A ::selection pszeudoelem

A ::selection pszeudoelem megegyezik egy elem azon részével, amely felhasználó által kiválasztott.

A következő CSS-tulajdonságok alkalmazhatók a ::selection-ra: szín, háttér, kurzor és vázlat.

A következő példa a kijelölt szöveget pirosra teszi sárga háttéren:

Példa

::selection {
  color: red; 
  
background: yellow;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>

Minden CSS pszeudo elem

::after

Példa

p::after

Példa leírás

Minden <p> elem tartalma után szúrjon be valamit

::before

Példa

p::before

Példa leírás

Minden <p> elem tartalma elé szúrjon be valamit

::first-letter

Példa

p::first-letter

Példa leírás

Kijelöli minden <p> elem első betűjét

::first-line

Példa

p::first-line

Példa leírás

Kijelöli minden <p> elem első sorát

::marker

Példa

::marker

Példa leírás

Kiválasztja a listaelemek jelölőit

::selection

Példa

p::selection

Példa leírás

Kijelöli az elemnek a felhasználó által kiválasztott részét

Minden CSS pszeudo osztály

:active

Példa

a:active

Példa leírás

Kiválasztja az aktív hivatkozást

:checked

Példa

input:checked

Példa leírás

Kijelöl minden bejelölt <input> elemet

:disabled

Példa

input:disabled

Példa leírás

Kijelöl minden letiltott <input> elemet

:empty

Példa

p:empty

Példa leírás

Kijelöl minden olyan <p> elemet, amelynek nincs gyermeke

:enabled

Példa

input:enabled

Példa leírás

Kijelöl minden engedélyezett <input> elemet

:first-child

Példa

p:first-child

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének első gyermeke

:first-of-type

Példa

p:first-of-type

Példa leírás

Kijelöl minden <p> elemet, amely a szülő elemének első <p> eleme

:focus

Példa

input:focus

Példa leírás

Kijelöli a fókuszban lévő <input> elemet

:hover

Példa

a:hover

Példa leírás

Kijelöli a hivatkozásokat az egérrel

:in-range

Példa

input:in-range

Példa leírás

Olyan <input> elemeket választ ki, amelyek értéke egy adott tartományon belül van

:invalid

Példa

input:invalid

Példa leírás

Kijelöli az összes érvénytelen értékű <input> elemet

:lang(language)

Példa

p:lang(it)

Példa leírás

Kijelöl minden <p> elemet, amelynek lang attribútumértéke "it" kezdődik

:last-child

Példa

p:last-child

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülő utolsó gyermeke

:last-of-type

Példa

p:last-of-type

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének utolsó <p> eleme

:link

Példa

a:link

Példa leírás

Kijelöli az összes nem látogatott hivatkozást

:not(selector)

Példa

:not(p)

Példa leírás

Kijelöl minden olyan elemet, amely nem <p> elem

:nth-child(n)

Példa

p:nth-child(2)

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének második gyermeke

:nth-last-child(n)

Példa

p:nth-last-child(2)

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének második gyermeke, az utolsó gyermektől számítva

:nth-last-of-type(n)

Példa

p:nth-last-of-type(2)

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének második <p> eleme, az utolsó gyermektől számítva

:nth-of-type(n)

Példa

p:nth-of-type(2)

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének második <p> eleme

:only-of-type

Példa

p:only-of-type

Példa leírás

Kijelöl minden <p> elemet, amely a szülőjének egyetlen <p> eleme

:only-child

Példa

p:only-child

Példa leírás

Kijelöl minden olyan <p> elemet, amely a szülőjének egyetlen gyermeke

:optional

Példa

input:optional

Példa leírás

Kiválasztja az <input> elemeket "kötelező" attribútum nélkül

:out-of-range

Példa

input:out-of-range

Példa leírás

A megadott tartományon kívül eső értékű <input> elemeket választ ki

:read-only

Példa

input:read-only

Példa leírás

Kiválasztja az „csak olvasható” attribútummal rendelkező <input> elemeket

:read-write

Példa

input:read-write

Példa leírás

Kijelöli az „csak olvasható” attribútum nélküli <input> elemeket

:required

Példa

input:required

Példa leírás

Kiválasztja az <input> elemeket a megadott "szükséges" attribútummal

:root

Példa

root

Példa leírás

Kijelöli a dokumentum gyökérelemét

:target

Példa

#news:target

Példa leírás

Kijelöli az aktuális aktív #news elemet (a horgonynevet tartalmazó URL-re kattintva)

:valid

Példa

input:valid

Példa leírás

Kijelöli az összes érvényes értékű <input> elemet

:visited

Példa

a:visited

Példa leírás

Kijelöli az összes meglátogatott hivatkozást

CSS pszeudo-elemek

Tartalomjegyzék

Mik azok a pszeudoelemek?

Szintaxis

Az ::első soros Pszeudo-elem

Példa

Az ::első betűs Pszeudo-elem

Példa

Pszeudoelemek és HTML osztályok

Példa

Több pszeudo-elem

Példa

CSS - A ::before pszeudo-elem

Példa

CSS - Az ::after Pseudo-elem

Példa

CSS - A ::marker pszeudo-elem

Példa

CSS - A ::selection pszeudoelem

Példa

Minden CSS pszeudo elem

::after

::before

::first-letter

::first-line

::marker

::selection

Minden CSS pszeudo osztály

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited