Pseudoprvek CSS se používá ke stylování specifikovaných částí prvku.
Lze jej například použít k:
Upravte styl prvního písmene nebo řádku prvku
Vložte obsah před nebo za obsah prvku
Syntaxe pseudoprvků:
selector::pseudo-element {
property: value;
}Pseudoprvek ::first-line se používá k přidání speciálního stylu na první řádek textu.
Následující příklad zformátuje první řádek textu ve všech <p> Prvky:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}Zkuste to sami →
<!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>
Poznámka: Pseudoprvek ::first-line lze použít pouze na úrovni bloku Prvky.
Následující vlastnosti platí pro ::first-line pseudoprvek:
vlastnosti písma
barevné vlastnosti
vlastnosti pozadí
mezery mezi slovy
mezery mezi písmeny
text-dekorace
svisle zarovnat
textová transformace
výška čáry
Průhledná
Všimněte si zápisu s dvojitou dvojtečkou - ::first-line versus :first-line
Dvojtečka nahradila dvojtečku zápis pseudoprvků v CSS3. Toto byl pokus od W3C do rozlišovat mezi pseudotřídami a pseudoprvky.
Byla použita syntaxe s jednou dvojtečkou pro pseudotřídy i pseudoprvky v CSS2 a CSS1.
Pro zpětná kompatibilita, syntaxe s jednou dvojtečkou je přijatelná pro CSS2 a CSS1 pseudoprvky.
Pseudoprvek ::first-letter se používá k přidání speciálního stylu do prvního písmeno textu.
Následující příklad formátuje první písmeno textu ve všech <p> Prvky:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}Zkuste to sami →
<!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>
Poznámka: Pseudoprvek ::first-letter lze použít pouze na úrovni bloku Prvky.
Následující vlastnosti platí pro pseudoprvek ::first-letter:
vlastnosti písma
barevné vlastnosti
vlastnosti pozadí
vlastnosti okrajů
vlastnosti výplně
hraniční vlastnosti
text-dekorace
zarovnat svisle (pouze pokud "float" je "none")
textová transformace
výška čáry
plovák
Průhledná
Pseudoprvky lze kombinovat s třídami HTML:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} Zkuste to sami →
<!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>
Výše uvedený příklad zobrazí první písmeno odstavců s class="intro", in červené a ve větší velikosti.
Několik pseudoprvků lze také kombinovat.
V následujícím příkladu bude první písmeno odstavce červené, in xx velká velikost písma. Zbytek prvního řádku bude modrý a in malokapitálky. Zbytek odstavce bude mít výchozí velikost a barvu písma:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}Zkuste to sami →
<!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>
Pseudoprvek ::before lze použít k vložení určitého obsahu před obsah prvku.
Následující příklad vloží obrázek před obsah každého prvku <h1>:
h1::before
{
content: url(smiley.gif);
}Zkuste to sami →
<!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>
Pseudoprvek ::after lze použít k vložení nějakého obsahu za obsah prvku.
Následující příklad vloží obrázek za obsah každého prvku <h1>:
h1::after
{
content: url(smiley.gif);
}Zkuste to sami →
<!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>
Pseudoprvek ::marker vybere značky položek seznamu.
Následující příklad stylizuje značky položek seznamu:
::marker {
color: red;
font-size: 23px;
}Zkuste to sami →
<!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>
Pseudoprvek ::selection odpovídá části prvku, která je vybrané uživatelem.
Na ::selection lze použít následující vlastnosti CSS: barva, pozadí, kurzor a obrys.
Následující příklad změní vybraný text na červený na žlutém pozadí:
::selection {
color: red;
background: yellow;
}Zkuste to sami →
<!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>
Příklad
p::after
Příklad popisu
Za obsah každého prvku <p> vložte něco
Příklad
p::before
Příklad popisu
Před obsah každého prvku <p> vložte něco
Příklad
p::first-letter
Příklad popisu
Vybere první písmeno každého prvku <p>
Příklad
p::first-line
Příklad popisu
Vybere první řádek každého prvku <p>
Příklad
::marker
Příklad popisu
Vybírá značky položek seznamu
Příklad
p::selection
Příklad popisu
Vybere část prvku, která je vybrána uživatelem
Příklad
a:active
Příklad popisu
Vybere aktivní odkaz
Příklad
input:checked
Příklad popisu
Vybere každý zaškrtnutý prvek <input>
Příklad
input:disabled
Příklad popisu
Vybere každý zakázaný prvek <input>
Příklad
p:empty
Příklad popisu
Vybere každý prvek <p>, který nemá žádné potomky
Příklad
input:enabled
Příklad popisu
Vybere každý povolený prvek <input>
Příklad
p:first-child
Příklad popisu
Vybere všechny prvky <p>, které jsou prvním potomkem svého rodiče
Příklad
p:first-of-type
Příklad popisu
Vybere každý prvek <p>, který je prvním prvkem <p> jeho rodiče
Příklad
input:focus
Příklad popisu
Vybere prvek <input>, který má fokus
Příklad
a:hover
Příklad popisu
Vybírá odkazy na myši
Příklad
input:in-range
Příklad popisu
Vybere prvky <input> s hodnotou v určeném rozsahu
Příklad
input:invalid
Příklad popisu
Vybere všechny prvky <input> s neplatnou hodnotou
Příklad
p:lang(it)
Příklad popisu
Vybere každý prvek <p> s hodnotou atributu lang začínající „it“
Příklad
p:last-child
Příklad popisu
Vybere všechny prvky <p>, které jsou posledním potomkem svého rodiče
Příklad
p:last-of-type
Příklad popisu
Vybere každý prvek <p>, který je posledním prvkem <p> jeho rodiče
Příklad
a:link
Příklad popisu
Vybere všechny nenavštívené odkazy
Příklad
:not(p)
Příklad popisu
Vybere každý prvek, který není prvkem <p>
Příklad
p:nth-child(2)
Příklad popisu
Vybere každý prvek <p>, který je druhým potomkem svého rodiče
Příklad
p:nth-last-child(2)
Příklad popisu
Vybere každý prvek <p>, který je druhým potomkem svého rodiče, počítáno od posledního potomka
Příklad
p:nth-last-of-type(2)
Příklad popisu
Vybere každý prvek <p>, který je druhým prvkem <p> jeho rodiče, počítáno od posledního potomka
Příklad
p:nth-of-type(2)
Příklad popisu
Vybere každý prvek <p>, který je druhým prvkem <p> svého rodiče
Příklad
p:only-of-type
Příklad popisu
Vybere každý prvek <p>, který je jediným prvkem <p> jeho rodiče
Příklad
p:only-child
Příklad popisu
Vybere každý prvek <p>, který je jediným potomkem svého rodiče
Příklad
input:optional
Příklad popisu
Vybere prvky <input> bez "povinného" atributu
Příklad
input:out-of-range
Příklad popisu
Vybere prvky <input> s hodnotou mimo zadaný rozsah
Příklad
input:read-only
Příklad popisu
Vybere prvky <input> se zadaným atributem "pouze pro čtení".
Příklad
input:read-write
Příklad popisu
Vybere prvky <input> bez atributu „pouze pro čtení“.
Příklad
input:required
Příklad popisu
Vybere prvky <input> se zadaným atributem "required".
Příklad
root
Příklad popisu
Vybere kořenový prvek dokumentu
Příklad
#news:target
Příklad popisu
Vybere aktuální aktivní prvek #news (kliknutí na adresu URL obsahující tento název kotvy)
Příklad
input:valid
Příklad popisu
Vybere všechny prvky <input> s platnou hodnotou
Příklad
a:visited
Příklad popisu
Vybere všechny navštívené odkazy