CSS: pseudoprvky a pseudotřídy. Pseudotřídy a pseudoprvky v CSS (hover, before, first-child a další). Další zdroje pro třídy v rodině:nth

Zdravím vás, milí čtenáři blogu. Dnes budeme pokračovat v tématu studia kaskádové tabulky styly. V jednom z předchozích článků jsme se podívali, ale podívali jsme se jen na některé z nich. A dále tu máme selektory pseudotříd a pseudoprvků.

Pseudoprvky

Pseudoprvky- typ speciálních selektorů, které vážou styl ke konkrétnímu fragmentu prvku webové stránky a mohou také generovat obsah, který není v původní html kód. Tento fragment může být prvním znakem nebo prvním řádkem odstavce.

Pseudoprvky se nepoužívají samostatně, ale pouze ve spojení s hlavními voliči:

<основной селектор>:<псевдоэлемент> { <стиль> }

Nejprve přijde název hlavního selektoru, poté dvojtečka a za ním název pseudoprvku.

:první dopis

Sváže styl s prvním písmenem textu v prvku webové stránky, pokud mu nepředchází vložený netextový prvek, jako je obrázek. To dovoluje vytvořit iniciátor v textu(zvětšené první písmeno, jehož účaří je jeden nebo více řádků pod účaří základního textu), a zvýšená iniciála(zvýšené velké písmeno, jehož účaří se shoduje s účaří hlavního textu).

Podívejme se na použití prvního písmene na příkladu vytvoření výrazné iniciály:

...

A výsledek příkladu:

Jak můžete vidět na snímku obrazovky, první písmeno odstavce se zdvojnásobilo a změnilo barvu na červenou.

Pseudoprvek:první řádek váže styl na první řádek textu v prvku webové stránky. Podívejme se na účinek pseudoprvku: první řádek na odstavec textu:

...

Vítejte na našem automobilovém webu. Zde najdete mnoho zajímavých a užitečných článků o autech, jejich Technické specifikace a funkcemi.

Výsledek:

:po a:před

Pseudoprvky after a before se používají k vložení obsahu za a před obsah prvku. Tyto pseudoprvky fungují ve spojení s obsah vlastnosti stylu, který určuje obsah, který se má vložit.

Podívejme se na příklad:

...

Vítejte na našem automobilovém webu. Zde najdete mnoho zajímavých a užitečných článků o autech, jejich technických vlastnostech a vlastnostech.

Vědecký jazyk automobil Tento: Bezkolejová silnice s mechanickým motorem vozidlo s minimálně 4 koly .

Podívejme se na výsledek:

Jak vidíte, na konci každého odstavce je vložen text „site“, jak je napsáno css pravidlo ve vlastnosti "obsah". Pokud vložíte „před“ místo „po“, bude text vložen na začátek odstavce.

Pseudotřídy

Pseudotřídy vám umožňují svázat styl s prvky webové stránky na základě jejich stavu a umístění ve stromu prvků. Příkladem takového stavu může být hypertextový odkaz, který změní barvu, když na něj najedete myší.

Na css popis pravidla, pseudotřídy se obvykle používají ve spojení s hlavními selektory:

<основной селектор><псевдокласс> { <стиль> }

Pokud je pseudotřída zadána bez selektoru na začátku (:hover), platí pro všechny prvky stránky.

Pseudotřídy se běžně dělí do tří skupin:

• stanovení stavu prvků;
• související se stromem prvků;
• s uvedením jazyka textu.

Pseudotřídy, které definují stav prvků

Pseudotřídy této skupiny definují stav prvku html stránky a aplikujte styl pouze na konkrétní stav. Typicky se stavové pseudotřídy používají pro hypertextové odkazy, ale někdy se používají pro jiné prvky webové stránky.

Pseudotřída :odkaz platí pro nenavštívené odkazy, tzn. odkazy, na které uživatel ještě neklikl. Položky a(...) a a:link(...) v šabloně stylů poskytují stejný výsledek, takže pseudotřídu:link lze vynechat.

Pseudotřída :navštívil definuje vzhled navštívené odkazy, tzn. odkazy, na které uživatel již klikl. Ve výchozím nastavení takové odkazy změní barvu na fialovou, ale pomocí této pseudotřídy lze změnit barvu a další parametry.

Pseudotřída :aktivní Platí pro aktivní prvky. Chcete-li například aktivovat odkaz, musíte na něj najet a kliknout myší.

Pseudotřída :soustředit se aplikované na prvek při příjmu zaostření. Například pole zadávání textu přijme fokus, když do něj umístíte kurzor.

A poslední pseudo třída :vznášet se použito na prvek, když na něj umístíte ukazatel myši, ale nedojde k žádnému kliknutí.

Podívejme se například, jak budou odkazy vypadat v různých stavech:

A výsledek:

Struktura dokumentu Pseudotřídy

Pomocí této skupiny pseudotříd jsou styly svázány s prvky v závislosti na jejich pozici ve struktuře dokumentu.

Podívejme se nejprve na pseudotřídy :první dítě A :poslední dítě, které vážou styl k prvkům selektoru, které jsou prvními a posledními potomky jejich rodiče. Aby to bylo jasnější, podívejme se na tyto pseudotřídy na příkladu:

...

• odstavec 1
• bod 2
• bod 3
• bod 4

Příklad výsledku:

V tomto příkladu pomocí pravidla CSS "li:první dítě"řekneme prohlížeči, že styl je třeba aplikovat na prvek li, který je ve svém rodičovském prvku na prvním místě. A pomocí voliče "li:poslední dítě" prvek musí být poslední. Pomocí , jsme tedy zadali, že by měl být vybrán první prvek seznamu tučně, a poslední prvek nastavte písmo na červenou.

Další pseudo třída :Ó pouze typu, který se vztahuje na podřízený prvek zadaného typu pouze v případě, že je jediným ze svých rodičů.

Například:

...

Výsledek:

V příkladu je na prvek aplikována pseudotřída: only-of-type , jehož styl řídí dvojnásobnou velikost písma. Velikost písma se zvětší pouze u těch hypertextových odkazů, které mají své rodiče (v tomto případě se jedná o značku

) se vyskytují pouze jednou.

Pseudotřída vám umožňuje svázat styl s prvky webové stránky na základě jejich číslování ve stromu prvků:

<основной селектор>:n-té dítě(liché | sudé |<число> | <выражение>) (styl)

Za názvem této pseudotřídy mohou být v závorkách uvedeny čtyři možné možnosti:

• zvláštní— styl bude připojen ke všem lichým prvkům, které splňují hodnotu <основной селектор> ;
• dokonce- znamená všechny sudé prvky;
• číslo— označuje pořadové číslo podřízeného prvku vzhledem k jeho rodiči (číslování začíná od 1 – označuje první prvek);
• výraz— dáno jako vzorec an+b, Kde A A b celá čísla a n počítadlo, které nabývá hodnot 0, 1, 2...

Například, jak barevně zvýraznit všechny sudé řádky tabulky? V tomto případě bude pseudotřída:n-té dítě ideální:

...

Buňka 1	Buňka 2	Buňka 3
Buňka 4	Buňka 5	Buňka 6
Buňka 7	Buňka 8	Buňka 9
Buňka 10	Pole 11	Buňka 12
Pole 13	Pole 14	Pole 15
Pole 16	Pole 17	Pole 18

Výsledek:

V příkladu kódu záznam tr:n-té dítě (2n) znamená, že styl musí být připojen ke všem prvkům tr, pomocí kterých se tvoří řádky tabulky (o tom jsme mluvili v článku). Navíc pořadové číslo řádků vzhledem k nadřazenému prvku stůl musí splňovat vzorec 2n, do kterého místo toho prohlížeč n dosadí celá čísla 0, 1, 2... Ve výsledku se ukáže, že styl je aplikován na řádky očíslované 2, 4, 6 atd.

Pseudotřídy:ne a *

Zbývá zvážit dvě další důležité pseudotřídy. Speciální pseudotřída:not umožňuje svázat styl s jakýmkoli prvkem webové stránky, který nesplňuje zadané podmínky. Tato podmínka může být libovolný selektor:

<основной селектор>:ne(<селектор выбора>) { <стиль> }

Styl bude vázán na prvky webové stránky, které vyhovují hlavní volič a neuspokojující volič. Například:

H1:není(#hlavní)(barva:červená;)

V důsledku tohoto pravidla css bude text všech zbarven červeně, kromě textu s atributem id budou rovné hlavní.

A poslední dnešní pseudotřída * („hvězdička“), která označuje jakýkoli prvek html stránky. Může být vyžadováno, pokud potřebujete nastavit jeden styl pro všechny prvky webové stránky současně, například nastavit styl písma nebo textu. Syntax:

* (Popis pravidel stylu)

Chcete-li například nastavit velikost textu pro všechny prvky dokumentu, můžete použít následující pravidlo css:

To je vše, uvidíme se zase na blogu!

Od autora: Specifikace modulu CSS Pseudo-elements Module Level 4 osvětluje chování existujících pseudoprvků a zavádí nové. Avšak pouze několik nových pseudoprvků má v současných prohlížečích podporu.

Dnes budeme hovořit o následujících pseudoprvcích:

::before - vloží vygenerovaný obsah před obsah prvku

::after - vloží vygenerovaný obsah za obsah prvku

::first-letter - vybere první písmeno prvku

::first-line - vybere první řádek prvku

::selection - stylizuje text vybraný kurzorem

Z nich prvky::first–letter, ::first–line a::selection ovlivňují obsah, který je součástí zdrojů. Pseudoprvky::before a::after naopak vkládají do dokumentu obsah, který není ve zdrojovém kódu. Pojďme se na všechny pseudoprvky podívat blíže.

Poznámka: syntaxe jedné dvojtečky

Možná jste viděli verze s jednou dvojtečkou ::first–letter, ::first–line, ::before a ::after ve starém CSS. V CSS2 byly tyto pseudoprvky specifikovány pomocí jednorázové dvojtečky:. IE8 vyžaduje syntaxi s jednou dvojtečkou, ačkoli většina ostatních prohlížečů podporuje obě. Je lepší použít syntaxi dvojtečky.

Pseudoprvky::před a::po

Většina pseudoprvků vám umožňuje vybrat obsah, který je již přítomen ve zdroji dokumentu, ale není specifikován jazykem (jinými slovy, vaším HTML). Nicméně ::před a::po práci jinak. Tyto pseudoprvky přidávají vygenerovaný obsah do stromu dokumentu. Vygenerovaný obsah neexistuje ve zdroji HTML, ale je zobrazen.

Proč používat generovaný obsah? Můžete například označit požadovaná pole formuláře přidáním obsahu za štítky:

/* Platí pro štítek spojený s povinným polem */ .required::after ( content: " (Povinné) "; barva: #c00; font-size: .8em; )

V požadovaném poli formuláře musíte použít požadovanou vlastnost HTML. Vzhledem k tomu, že tyto informace jsou již k dispozici v DOM, ::před a::po fungují jako pomocníci. Toto není kritický obsah, takže nemusí být součástí zdrojového kódu.

Poznámka: generovaný obsah a dostupnost

Některé čtečky obrazovky a prohlížeče rozpoznávají a čtou generovaný obsah, ale většina ne. Nepoužívejte pseudoprvky ::before a ::after k poskytování generovaného obsahu pro uživatele se zdravotním postižením. Tento problém můžete podrobněji prozkoumat v článku Leonie Watson „Podpora usnadnění pro obsah generovaný CSS“.

Dalším způsobem použití::before a::after je přidat k obsahu předponu nebo příponu. Výše uvedený formulář může používat pomocný text, jak je uvedeno níže:

Změňte si své heslo

vložte nové heslo

Přepsat vaše heslo

Delší hesla jsou silnější.

Uložit změny

< form method = "post" action = "/save" > < fieldset > < legend >Změňte si své heslo< / legend > < p > < label for = "password" >vložte nové heslo< / label > < input type = "password" id = "password" name = "password" > < / p > < p > < label for = "password2" >Přepište své heslo< / label > < input type = "password" id = "password2" name = "password2" > < / p > < p class = "helptext" >Delší hesla jsou silnější.< / p > < p > < button type = "submit" >Uložit změny< / button > < / p > < / fieldset > < / form >

Uzavřeme náš pomocný text do párových závorek pomocí ::before a ::after.

Helptext::before ( content: "("; ) .helptext::after ( content: ")"; )

Text nápovědy::předtím( obsah : "(" ; Text nápovědy::after ( obsah : ")" ;

Výsledek.

Možná nejvíc užitečným způsobem aplikace::před a::po – čištění plovoucích prvků. Nicolas Gallagher představil tuto techniku ​​(která je založena na práci Thierryho Koblentze) ve svém příspěvku „nový micro clearfix hack“:

/* Pro podporu IE<= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

Přidejte třídu clearfix do libovolného prvku, který je třeba vymazat za plovoucím prvkem.

Pseudotřídy ::before a ::after se chovají zcela jako děti značky, ke které jsou připojeny. Dědí všechny možné vlastnosti rodiče a jsou umístěny uvnitř nadřazeného bloku. Také interagují s ostatními prvky bloku, jako by to byly skutečné značky. Vlastnosti display: block nebo display: table na ::před a::po fungují úplně stejně jako na ostatních prvcích.

Upozornění: jeden pseudo prvek na selektor

Na tento moment Na selektor je povolen pouze jeden pseudoprvek. To znamená, že položka jako p::first-line::before je nesprávná.

Vytváření typografických efektů pomocí:prvního písmene

Pseudoprvky ::before a ::after vkládají obsah a ::first-letter pracuje s obsahem již zapsaným ve zdrojích. S jeho pomocí můžete vytvořit efekt prvního písmene nebo kapky, který jste mohli vidět v časopisech a knihách.

Poznámka: první písmeno a iniciály

Efekt prvního písmene je velké písmeno na začátku textu, které má větší velikost písma než zbytek textu. Iniciála je podobná prvnímu písmenu, ale iniciála je vložena do prvního odstavce o alespoň dvou řádcích.

Níže uvedené styly přidávají první velké písmeno ke všem odstavcům p v dokumentu:

p::first-letter ( font-family: serif; font-weight: bold; font-size: 3em; font-style: italic; color: #3f51b5; )

p::první písmeno( rodina písma: patka; váha písma: tučné; velikost písma: 3em; styl písma: kurzíva; barva : #3f51b5;

Ze snímku obrazovky můžete vidět, že ::first-letter změní výšku řádku prvního řádku, pokud byl prvku přidělena hodnota výšky řádku bez jednotek. V v tomto případě všechny p tagy zdědí z tagu body hodnotu výšky řádku 1,5.

Existují tři způsoby, jak tento problém zmírnit:

snižte hodnotu line-height pro pseudoelement ::first–letter, hodnota .5 bude fungovat téměř vždy;

nastavit výšku řádku s jednotkami pro pseudoprvek::první–písmeno;

nastavte výšku řádku pomocí jednotek pro tělo nebo nadřazené::první–písmeno.

První možnost zachovává vertikální rytmus, jako je tomu u hodnoty výšky řádku bez jednotek. Druhá možnost omezuje vedlejší účinky pevné výšky čáry na samotné pseudoprvky. Třetí možnost je nejhorší, je zde velká pravděpodobnost, že vytvoříte vedlejší efekt, který bude potřeba přepsat pomocí dodatečného CSS kódu.

V našem případě snižme hodnotu line-height pro p::first-letter na 0,5 (a přepišme vlastnosti v souboru, použijeme vlastnost shorthand font):

p::first-letter ( font: bold italic 3em / .5 serif; barva: #3f51b5; )

p::první písmeno( barva : #3f51b5;

Výsledek je vidět níže. Všimněte si, že jsme také potřebovali upravit spodní okraj každého odstavce p, abychom kompenzovali sníženou hodnotu výšky řádku na p::první písmeno.

Chcete-li vytvořit iniciály, budete potřebovat trochu více řádků CSS. Na rozdíl od prvních velkých písmen se kolem něj obtéká sousední text iniciály. To znamená, že musíme přidat float: left; do našich stylů. Přidáme také horní, pravý a dolní okraj:

p::first-letter ( font: bold italic 3em / .5 serif; font-style: italic; color: #607d8b; float: left; margin: 0.2em 0.25em .01em 0; )

p::první písmeno( písmo: tučná kurzíva 3em / . 5 patka; styl písma: kurzíva; barva : #607d8b; plavat vlevo; marže : 0,2 em 0,25 em . 01em 0;

Plovoucí prvek, nebo v našem případě pseudo prvek, způsobí, že se kolem něj obtéká zbytek textu, jak je znázorněno níže.

Pokud k nastavení rozměrů, okrajů a výšky řádku nepoužíváte px nebo rem, bude velmi obtížné perfektně stylizovat ::first-letter ve všech prohlížečích.

Někdy je první písmeno textového prvku interpunkční znaménko. Například zprávy začínající citátem:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Fusce odio leo, sollicitudin vel mattis eget, ...

< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elita.“ Fusce odio leo, sollicitudin vel mattis eget, ...

V tomto případě budou styly pro ::first-letter použity jak na úvodní uvozovku, tak na první písmeno, jak je znázorněno níže. Styly jsou použity stejné ve všech prohlížečích.

Výsledek však bude jiný, když je interpunkce generována prvkem. Zvažte následující označení:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit...

< p > < q >Lorem ipsum dolor sit amet, consectetur adipiscing elit.< / q >Fusce odio leo, sollicitudin vel mattis eget, iaculis sit. . .< / p >

V současné době prohlížeče vykreslují značku q jako uvozovky specifické pro daný jazyk, které se otevírají a zavírají. Ne všechny prohlížeče však takové uvozovky rozpoznávají stejně. Ve Firefoxu 42 (viz níže), Safari 8 a vyšším dřívější verze::first-letter změní pouze úvodní citaci.

V Chrome, Opeře a Yandexu není úvodní uvozovka značky q a první písmeno odstavce upraveno. Níže je snímek obrazovky v prohlížeči Chrome.

IE aplikuje styly jak na úvodní uvozovku, tak na první písmeno odstavce. Viz. níže.

Specifikace modulu CSS Pseudo-elements Module Level 4 uvádí, že interpunkce před nebo bezprostředně za prvním písmenem nebo znakem by měla být upravena. Specifikace však není explicitní ohledně použití stylů na generovanou interpunkci.

Chyby prohlížeče při použití::first-letter

Z velké části funguje ::first-letter přesně tak, jak byste očekávali ve všech prohlížečích. Jako u každého Vlastnosti CSS, tento pseudoprvek má několik chyb a případů zneužít, o kterých musíte vědět.

Ve Firefoxu 39 a dřívějších některé znaky způsobí, že Firefox ignoruje pravidlo::první-písmeno: -,$,^,_,+,`,~,>,<.>

To platí pro případy, kdy je první znak zadán pomocí ::before a vlastnosti content, a také pokud je uveden ve zdrojích dokumentu. Pro tuto chybu neexistuje žádná oprava. Pokud použijete ::first-letter, budete muset tyto znaky na začátku odstavce escapovat.

Poznámka: chyby v prohlížečích Blink

Některé verze prohlížečů Blink nepoužijí pravidlo ::first–letter, pokud tak učinil rodič zobrazit vlastnost s vloženou hodnotou nebo tabulkou. Chyba existuje v Chrome 42, Opera 29 a Yandex 15. Chyba byla opravena v Chrome 44, ale vydání neuvidí světlo světa, dokud nebudete mít tuto knihu ve svých rukou. Nejjednodušší způsob, jak chybu obejít, je přidat vlastnost display: inline-block, display: block nebo display: table-cell k nadřazenému prvku.

Vytváření typografických efektů pomocí::first-line

Pseudotřída ::first-line funguje téměř jako ::first-letter, ale efekt je aplikován na celý první řádek prvku. Můžete například zvětšit první řádek každého odstavce a změnit barvu textu:

Konec prvního řádku můžete vynutit pomocí br nebo hr, jak je znázorněno níže. Bohužel ne vždy to funguje. Pokud váš prvek může obsahovat pouze 72 znaků, pak značka br za 80. znakem nebude mít žádný vliv na pseudoprvek ::prvního řádku. Dostaneš jen zvláštní zalomení řádku.

Totéž platí pro nezlomitelnou mezeru (), která se vkládá, aby se zabránilo dělení slov mezi řádky. Toto nebude mít žádný vliv na::first-line. Slovo, které následuje před, bude nuceno přesunout se na řádek, kde je text za nepřerušitelný prostor.

Vygenerovaný obsah přidaný přes ::before se objeví na prvním řádku, jak je ukázáno níže.

Pokud je vygenerovaný text dostatečně dlouhý, zcela vyplní první řádek. Pokud však přidáte display: block (například p::before (obsah: '!!!'; display: block;)), pak obsah zabere celý první řádek.

Bohužel tato chyba stále existuje ve Firefoxu 40 a starších verzích. Firefox toto pravidlo zcela ignoruje.

Zábavné rozhraní s::selection

Pseudoprvek ::selection odkazuje na takzvané „zvýrazňující“ pseudoprvky specifikované ve specifikaci modulu CSS Pseudo-Elements Level 4 Tento pseudoprvek zvýraznění byl dříve zahrnut ve specifikaci Selectors Level 3, která je jediná podporovaná v prohlížečích.

S výběrem :: můžete použít CSS styly na obsah vybraný myší. Ve výchozím nastavení je pozadí a barva textu zvýrazněného obsahu nastavena systémem. Vývojáři však mohou tato nastavení změnit, jak je uvedeno níže.

Ne všechny vlastnosti lze použít s::selection. Specifikace obsahuje pouze následující vlastnosti:

Při výběru barvy popředí mějte na paměti dostupnost Pozadí pro::výběr. Některé barevné kombinace poskytují slabý kontrast pro osoby se slabým zrakem. Jiné kombinace mohou být pro barvoslepé nečitelné. Než dokončíte výběr barev, použijte nástroj Contrast Checker a Color Blindness Simulator.

Modul Pseudo-Elements také obsahuje pseudotřídy::spelling-error a::grammar-error. Jakmile budou implementovány, budeme moci stylizovat text s chybami kontrolovanými podle slovníku prohlížeče.

Pseudoprvky umožňují nastavit styl prvků, které nejsou definovány ve stromu prvků dokumentu, a také generovat obsah, který není v zdrojový kód text.

Syntaxe pro použití pseudo prvků je následující.

Selektor:Pseudoprvek (Popis pravidel stylu)

Nejprve přichází název selektoru, poté dvojtečka a za ním název pseudoprvku. Každý pseudoelement lze použít pouze na jeden selektor, pokud chcete nastavit více pseudoprvků pro jeden selektor, musíte k nim jednotlivě přidat pravidla stylu, jak je znázorněno níže.

Foo: první písmeno ( barva: červená )
.foo:first-line (styl písma: kurzíva)

Pseudoprvky nelze použít na interní styly, pouze na propojené nebo globální šablony stylů.

:po

Používá se k vložení určeného obsahu za obsah prvku. Tento pseudoelement funguje ve spojení s vlastností content style, která určuje obsah, který se má vložit. Příklad 16.1 ukazuje použití pseudoprvku :after k přidání textu na konec odstavce.

Příklad 16.1. Aplikace: po

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Chytání lva v poušti metodou zlatého řezu.

Způsob, jak chytit lva, je jednoduchá hrubá síla.

Výsledek příkladu je na Obr. 16.1.

Rýže. 16.1. Přidání textu do odstavce pomocí :after

V v tomto příkladu se přidá k obsahu odstavce s novou třídou dodatečné slovo, což je hodnota vlastnosti content.

Pseudoprvky :after a :before a vlastnost stylu obsahu nejsou prohlížečem podporovány internet Explorer až do sedmé verze včetně.

:před

Akce :before je podobná pseudoprvku :after, ale vkládá obsah před obsah prvku. Příklad 16.2 ukazuje, jak přidat značky jejich typu do položek seznamu jejich skrytím standardní značky a pomocí pseudoprvku :before.

Příklad 16.2. Použití: před

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4

• Cheburashka
• Krokodýl Gena
• Shapoklyak
• Krysa Larisa

Výsledek příkladu je uveden níže (obrázek 16.2).

Rýže. 16.2. Změna vzhledu značek pomocí:before

V tomto příkladu je pseudoelement :before nastaven pro selektor LI, který definuje prvky seznamu. K přidání požadovaných symbolů dojde nastavením hodnoty vlastnosti content. Vezměte prosím na vědomí, že argumentem nemusí být text, lze také použít znaky Unicode.

Oba :after i :before vytvářejí výsledky pouze pro prvky, které mají obsah, takže přidání img nebo input do selektoru nebude mít žádný výstup.

:první dopis

Definuje styl prvního znaku v textu prvku, ke kterému je připojen. To vám umožní vytvořit v textu iniciály a vyvýšené iniciály.

Iniciála je zvětšené první písmeno, jehož účaří je jeden nebo více řádků pod účaří základního textu. Zvýšená iniciála je zvětšené velké písmeno, jehož účaří se shoduje s účaří základního textu.

Podívejme se na příklad vytvoření vyvýšené iniciály. To vyžaduje přidání pseudoprvku :first-letter do selektoru P a nastavení počátečního stylu na požadovaný styl. Zejména zvětšete velikost textu a změňte barvu textu (příklad 16.3).

Příklad 16.3. Použití: první písmeno

HTML5 CSS 2.1 IE Cr Op Sa Fx

Paprsek baterky osvětlil staré vrzající schody, po kterých Pasha před ne více než pěti minutami vylezl do domu. Olya opatrně otevřela dveře a posvítila dovnitř domu. Paprsek světla si jakoby neochotně prorazil cestu přes těsnou oponu temnoty a prachu.

Olyin pohled klesl na podlahu a vykřikla. V prázdné místnosti nikdo nebyl a na podlaze ležela jen Pašova roztrhaná bota.

Výsledek příkladu je uveden níže (obrázek 16.3).

Rýže. 16.3. Vytvoření zvýšené iniciály

Tento příklad změní písmo, velikost a barvu prvního písmene každého odstavce textu.

:první řada

Určuje styl prvního řádku textu bloku. Délka tohoto řádku závisí na mnoha faktorech, jako je použitý font, velikost okna prohlížeče, šířka bloku, jazyk atd.

Ne všechny lze použít na pseudoprvek :first-line vlastnosti stylu. Je přijatelné používat vlastnosti související s písmem, změnou barvy textu a pozadí, stejně jako: jasné, výška řádku, mezera mezi písmeny, dekorace textu, transformace textu, zarovnání svisle a mezery mezi slovy.

Příklad 16.4 ukazuje použití pseudoprvku :first-line ve vztahu k odstavci textu.

Příklad 16.4. Výběr prvního řádku textu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Zajímalo by mě, jestli existuje opravdu praktický způsob, jak použít vlastnost prvního řádku? Ne, ne tak, aby se ukázalo, že je to možné, ale aby vám krása řešení skutečně vyrazila dech, oči se rozsvítily ze skrytých perspektiv, načež nezbývá než si říct, že tohle je také to, co byste měli dělat jinak, elegantně a efektivně.

Výsledek příkladu je na Obr. 16.4.

Rýže. 16.4. Výsledek použití pseudoprvku:první řádek

V tomto příkladu je první řádek zvýrazněn červeně a kurzívou. Vezměte prosím na vědomí, že když změníte šířku okna prohlížeče, styl prvního řádku zůstane konstantní, bez ohledu na počet slov, které obsahuje.

Otázky ke kontrole

1. Který pseudoprvek umožňuje přidat text na začátek věty?

1. :po
2. :před
3. :první řada
4. :první text
5. :první dopis

2. Co dělá následující styl?

OL LI:první písmeno (
červená barva;
}

1. Změní barvu prvního písmene položky seznamu s odrážkami.
2. Změní barvu prvního písmene číslované položky seznamu.
3. Změní barvu prvního řádku v seznamu s odrážkami.
4. Změní barvu prvního řádku v číslovaném seznamu.
5. Změní barvu textu celého seznamu.

3. Který selektor je špatně napsaný?

1. p.new:dříve
2. zkr.:první řádek
3. p.new.back:after
4. div:before:first-letter
5. a:hover:before

Odpovědi

2. Změní barvu prvního písmene položky číslovaného seznamu.

Pseudoprvky umožňují nastavit styl prvků, které nejsou definovány ve stromu prvků dokumentu, a také generovat obsah, který není ve zdrojovém kódu textu. Pseudoprvky začínají ::, aby se odlišily od pseudotříd.

Pseudoprvek::-ms-clear

Nastaví styl tlačítka Clear textové pole. Zpočátku toto tlačítko není viditelné, objeví se na pravé straně pole pouze při zadávání textu.

Pseudoprvek::-ms-fill

Nastaví styl ukazatele průběhu Internetové prohlížeče Průzkumník a Edge. Samotná hodnota indikátoru a jeho pozice se dynamicky mění pomocí skriptů.

Pseudo-prvek::-ms-reveal

Nastavuje styl tlačítka pro zobrazení hesla v poli formuláře. Tlačítko není zpočátku viditelné a zobrazuje se na pravé straně pole při zadávání hesla.

Pseudoprvek::-ms-tooltip

Platí parametry stylu na nápovědu posuvníku zobrazující aktuálně vybranou hodnotu v Internet Exploreru a Edge.

Pseudoprvek::po

Pseudoprvek, který se používá k zobrazení požadovaného obsahu za obsahem prvku, ke kterému je připojen.

Pseudoprvek::pozadí

Pod ním je zobrazen pseudoelement horní prvek v zásobníku podél osy Z, ale především ostatní prvky na stránce, pokud existují. Obvykle se používá ke ztmavení stránky, aby se zdůraznila fotografie nebo dialogové okno, které se objeví nad ztmavením.