Níže uvedený příklad nebude fungovat:

Odstavec a v něm mastný prvek a je to tady nakloněnýživel.

Tady mastný A zdůraznil prvky, více nakloněný.

Reálnější příklad

Podívejme se blíže na to, jak funguje sousední volič. skutečný příklad. Ve velkých článcích obsahujících několik sekcí označených štítky

, je vhodné zvýšit horní okraj (vlastnost margin-top). Díky odsazení 30px bude text čitelný. Ale pokud tag

přichází hned poté

, a to může být na začátku článku, horní odrážka nad značkou

bude nadbytečný. Tento problém lze vyřešit pomocí selektoru sousedních prvků.

Zde je html kód s příkladem toho, jak funguje selektor sousedních prvků.

Ahoj!

Nadpis h2

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Pomocí sousedního nástroje pro výběr je také vhodné upravit odsazení mezi nadpisem a prvním odstavcem sekce, v našem příkladu se jedná o značky

A

Za zmínku také stojí, že pro snížení odsazení je vhodné použít záporné hodnoty.

Ahoj!

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nyní příklad, jak použít sousední selektor k výběru všech prvků seznamu kromě prvního.

• Položka seznamu #1.
• Položka seznamu #2.
• Položka seznamu č. 3.
• Položka seznamu #4.

V důsledku tohoto příkladu se stane toto:

Obrázek 1. Práce příkladu č. 5.

Není to tak dávno, co vyšla nová, osmá verze prohlížeče Internet Explorer a všichni správci webu si oddechli. Koneckonců, prohlížeč Microsoftu, byť s obrovským zpožděním, začal víceméně respektovat specifikace HTML a CSS a adekvátně zobrazovat webové stránky. Obecně to všichni očekávali od sedmé verze. Ten však na první pohled kromě podpory používání tabů nepřinesl nic nového. Ale to je jen na první pohled... Málokdo ví o další velmi významné novince v IE7: v této verzi tento prohlížeč poprvé začal podporovat nové typy selektorů CSS.

Selektor je část pravidla CSS, která určuje, na které prvky se má použít. Jejich hlavní typy znají téměř všichni webmasteři. Ale málokdo slyšel o tak „exotických“ věcech, jako jsou sousedící a podřízené selektory, stejně jako selektory atributů. To se vysvětluje skutečností, že nemělo smysl je používat po dlouhou dobu, protože jsou jedny z nejoblíbenějších Internetové prohlížeče Průzkumník pro ně neposkytoval podporu. Nyní se však situace změnila a nebylo by příliš moudré ponechat stranou nové příležitosti, které se otevřely. Proto jsem se rozhodl napsat tuto krátkou recenzi.

Sousední voliče

Označuje, že pravidlo CSS se použije na prvek pouze tehdy, když sousedí s jiným prvkem. Příklad:

Prvky se nazývají sousedé, když jsou v kódu stránky a mezi nimi neexistují žádné další prvky

Zde jsou sousední značky A , a A . Tagy A nesousedí, protože je mezi nimi „vklíněný“ cizí prvek .

Syntaxe pro zápis sousedního selektoru je následující:

I element + II element (...)

Vytvořme toto pravidlo pro náš příklad:

silné + em ( barva: červená; )
silné + ins ( barva: modrá; )

Takto bude vypadat výsledek:

Jak vidíte, styl se změnil pouze u značky a značku nebyl ovlivněn. To velmi dobře ilustruje pravidlo sousedství.

Proveďme další experiment - nahraďte v našem příkladu na :

Prvky se nazývají sousedé, když jsou v kódu stránky umístěné vedle sebe a mezi nimi neexistují žádné další prvky

Jak asi tušíte, styl druhého z tagů Nezmění se:

To se stane, protože již nebude sousedit s .

Dětské voliče

Označuje, že pravidlo CSS je aplikováno na prvek pouze v případě, že je potomkem nějakého jiného prvku. Příklad:

Prvek se nazývá potomkem prvku, do kterého je vnořen, pokud je je Přímo potomek tento prvek

Zde jsou děti štítkem ve vztahu ke značce

A vůči . Štítek ve vztahu ke značce

Není to dítě, protože to není jeho přímý rodič.

Syntaxe záznamu je následující:

I element > II element (...)

Podřízené selektory jsou velmi podobné známým kontextovým selektorům, jen s tím rozdílem, že u kontextových selektorů nezáleží na hloubce vnoření prvků. U dětí nesmí být hloubka hnízdění větší než jedna úroveň. Pojďme si to vše ilustrovat vytvořením několika pravidel pro náš příklad:

p>
p > em (barva: modrá; ) /* Dětský výběr */

Dostaneme následující výsledek:

V našem případě tag ne dítě

Protože je na druhém stupni hnízdění v něm. Styl, který měl udělat text modrý, mu přirozeně „nefungoval“.

Nyní nahradíme podřízený selektor kontextovým selektorem:

p > silné ( barva: červená; ) /* Dětský volič */
p em (barva: modrá; ) /* Kontextový volič */

Výsledek je předvídatelný:

Na rozdíl od podřízeného v tomto případě kontextový selektor „fungoval“, protože hloubka úrovně vnoření pro něj není důležitá.

Voliče atributů

Označte, že pravidlo CSS se vztahuje pouze na prvky, které obsahují atribut zadaný ve selektoru. Příklad:

CSS je velmi důležitá technologie, bez kterého nelze vytvořit žádný slušný web

Hlavními pojmy CSS jsou pravidla stylu, selektory, vlastnosti a jejich hodnoty.

Zde má pouze první odstavec samostatně definovaný parametr (nebo atribut, což je totéž) zarovnání. Proto se pravidlo CSS pro selektor atributu zarovnání bude vztahovat konkrétně na první odstavec a pouze na něj.

Syntaxe pro zápis selektoru atributů je:

[atribut] (...)

Vytvořme pravidlo pro náš příklad (pro přehlednost uvedeme kromě atributu i samotnou značku, pro kterou by se mělo uvažovat):

p ( barva: zelená; váha písma: tučné; )

Není těžké uhodnout, co se nakonec stane:

Doposud jsem popsal to, čemu se říká jednoduchý selektor atributů. Pro něj je důležitá pouze přítomnost atributu na tagu, ale jeho význam není vůbec důležitý. Mezitím existují další typy selektorů atributů. Pojďme se na ně rychle podívat:

[attribute=”value”] ( …)

Platí pouze pro prvky, které mají pro tento atribut zadanou hodnotu.

[attribute^=”value”] ( …)

Téměř totéž, pouze v tomto případě by měl atribut pouze začínat zadanou hodnotou a ne nutně ji obsahovat celou.

[attribute$=”value”] ( … )

Podobně s tím rozdílem, že zde atribut musí končit zadanou hodnotou.

[attribute*=”value”] ( … )

Tento zápis označuje, že hodnota se může vyskytovat kdekoli v atributu.

Jak můžete vidět, sousedé, děti a selektory atributů nám poskytují mnoho nových možností pro psaní efektivního kódu CSS. Můžete přijít s velkým množstvím příkladů, ve kterých by bylo jejich použití vhodnější než „tradiční“ známé selektory. Proto si myslím, že by bylo moudré tyto techniky přijmout. Jak je použít, je na vás, abyste se rozhodli.

Autor článku: Alexey Antonov, tvůrce a správce blogu o webových technologiích www.lounwolf.ru
=====================================================================

Vlad Merževič

Prvky webové stránky se nazývají sousední, když za sebou bezprostředně následují v kódu dokumentu. Podívejme se na několik příkladů vztahů prvků.

Lorem ipsum dolor sedět amet.

V tomto příkladu tag je potomkem značky

Protože je uvnitř tohoto kontejneru. Respektive

Působí jako rodič .

Lorem ipsum dolor sedět amet.

Zde jsou značky A se nijak nepřekrývají a představují sousední prvky. Skutečnost, že jsou umístěny uvnitř kontejneru

Vůbec to neovlivňuje jejich postoj.

Lorem ipsum dolor sit amet, conectetuer adipiscing elita.

Zde jsou sousední značky A , a A . V čem A sousední prvky nejsou ošetřeny, protože mezi nimi je kontejner .

Chcete-li ovládat styl sousedních prvků, použijte symbol plus (+) mezi dvěma voliči. Obecná syntaxe je následující.

Selektor 1 + Selektor 2 (Popis pravidel stylu)

Mezery kolem znaménka plus jsou volitelné. Styl v tomto zápisu se použije na selektor 2, ale pouze v případě, že sousedí se selektorem 1 a bezprostředně za ním následuje.

Příklad 11.1 ukazuje strukturu vzájemné interakce značek.

Příklad 11.1. Pomocí sousedních voličů

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, conectetuer adipiscující elita.

Lorem ipsum dolor sit amet, conectetuer adipiscující elita.

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

Rýže. 11.1. Zvýraznění textu barvou pomocí sousedních selektorů

V v tomto příkladu změní se barva textu obsahu kontejneru když se nachází bezprostředně za kontejnerem . V prvním odstavci je tato situace implementována, takže slovo „consectetuer“ je v prohlížeči zobrazeno červeně. Ve druhém odstavci je sice značka , ale žádný štítek v okolí ne, takže na tento kontejner není použit žádný styl.

Podívejme se na praktičtější příklad. Často se stává nezbytností vkládat do textu článku různé poznámky pod čarou a poznámky. Obvykle se pro tento účel vytvoří nová třída stylu a aplikuje se na odstavec tímto způsobem, můžete snadno změnit vzhled textu. Ale půjdeme jinou cestou a použijeme sousední selektory. Pro zvýraznění komentářů vytvoříme nová třída, nazvěme to sic a aplikujte to na značku

. První odstavec za takovým nadpisem je zvýrazněn barvou pozadí a odsazením (příklad 11.2). Vzhled zbývajících odstavců zůstane nezměněn.

Příklad 11.2. Změnit styl odstavce

HTML5 CSS 2.1 IE Cr Op Sa Fx

Metody, jak chytit lva v poušti

Metoda sekvenčního vyhledávání

Nechť má lev celkové rozměry L x Š x V, kde L je délka lva od špičky nosu po štětec ocasu, W je šířka lva a H je jeho výška. Poté rozdělíme poušť na řadu elementárních obdélníků, jejichž velikost se shoduje s šířkou a délkou lva. Vzhledem k tomu, že lev nemusí být striktně v daném prostoru, ale zároveň ve dvou, měla by být klec na odchyt z větší plochy a to 2L x 2W. Díky tomu se vyhneme chybě, že by se do klece chytila ​​jen polovina lva, v horším případě pouze jeho ocas.

Důležitá poznámka

Pro zjednodušení výpočtů může být ocas vyřazen jako chyba měření a nebere se v úvahu.

Výsledek tohoto příkladu je znázorněn na Obr. 11.2.

Rýže. 11.2. Změna vzhledu odstavce pomocí sousedních selektorů

V tomto příkladu je text formátován pomocí odstavců (tag

), ale zápis H2.sic + P nastaví styl pouze pro první odstavec za značkou

, která má přidanou třídu s názvem sic.

Sousední selektory jsou vhodné pro použití u značek, ke kterým se automaticky přidávají odsazení, aby bylo možné nezávisle upravit míru odsazení. Například pokud značky jdou za sebou

A

, pak lze vzdálenost mezi nimi snadno upravit pomocí sousedních voličů. U po sobě jdoucích značek je situace podobná.

A

A také v dalších podobných případech. Příklad 11.3 tímto způsobem mění velikost mezery mezi určenými značkami.

Příklad 11.3. Mezery mezi nadpisy a textem

HTML5 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1

Nadpis 2

Odstavec!

Protože při použití sousedních selektorů je styl aplikován pouze na druhý prvek, je velikost okrajů zmenšena zahrnutím záporné hodnoty pro vlastnost margin-top. V tomto případě se text zvedne, blíže k předchozímu prvku.

Otázky ke kontrole

1. Které značky v tomto kódu sousedí?

Vzorec kyseliny sírové:H ₂ TAK ₄

1. A

2. A
3. A
4. _A
5. A

2. K dispozici je následující HTML kód:

Poslední Fermatova věta

X ⁿ+Y ⁿ
= Z ⁿ

kde n je celé číslo > 2

Jaký text bude zvýrazněn červeně pomocí stylu SUP + SUP ( barva: červená; )?

1. druhé "n"
2. Druhé a třetí "n".

Zdravím vás, milí čtenáři. V předchozích článcích jsme studovali především atributy stylů CSS. Je jich hodně. Někteří nastavují parametry písma, jiní parametry pozadí a další parametry pro odsazení a rámečky.

V tomto článku budeme hovořit o selektorech stylů. V jednom z článků, kterých jsme se již dotkli. Dnes se podíváme na několik dalších typů selektorů, které explicitně nesvazují pravidlo stylu s prvkem webové stránky. Jedná se o tzv. speciální selektory. Existuje jich několik druhů.

Kombinátory v CSS (sousední, podřízené a kontextové selektory)

Kombinátory jsou typem selektorů CSS, které vážou pravidlo stylu k prvku webové stránky na základě jeho umístění vzhledem k ostatním prvkům.

První symbol kombinátoru Plus(+) popř sousední volič. Plus se nastavuje mezi dvěma voliči:

<селектор 1> + <селектор 2> { <стиль> }

Styl je v tomto případě aplikován na volič 2, ale pouze pokud sousedí s volič 1 a přijde hned po něm. Podívejme se na příklad:

silný + i (

}
...

Toto je normální text. Tento miniatura, prostý text, červený text

Toto je normální text. Toto je tučný text, prostý text, a to je normální text.

Výsledek:

Styl popsaný v příkladu bude aplikován pouze na první text uzavřený ve značce , protože přichází hned za značkou .

Kombinátor vlnovka(~) platí i pro sousední voliče, ale tentokrát mezi nimi mohou být další prvky. V tomto případě musí být oba selektory vnořeny do stejné nadřazené značky:

<селектор 1> ~ <селектор 2> { <стиль> }

Styl bude aplikován na volič 2 která by měla následovat volič 1. Zvažte příklad:

silný~i(
červená barva; /* Červená barva textu */
}
...

Toto je normální text. Toto je tučný text, prostý text, červený text aplikovalo se na něj sousední pravidlo výběru.

Toto je normální text. Toto je tučný text, prostý text, a toto je červený text.

Výsledek:

Jak vidíte, pravidlo stylu tentokrát fungovalo pro oba texty uzavřené ve značce , a to přesto, že v druhém případě mezi tag A stojí za značku .

Kombinátor > odkazuje na dětské voliče. Umožňuje vám svázat styl CSS s prvkem webové stránky, který je přímo vnořen do jiného prvku:

<селектор 1> > <селектор 2> { <стиль> }

Styl bude vázán na volič 2, který je přímo vnořen volič 1.

div > silný (

}
...

Toto je normální text. Toto je text s tučnou kurzívou.

Toto je normální text. A toto je běžný tučný text.

A výsledek:

Jak můžete vidět na obrázku, pravidlo stylu ovlivnilo pouze první značku , který je přímo vnořen do značky

. A bezprostřední rodič druhé značky je značka

, tak se na něj pravidlo nevztahuje.

Dále se podíváme kontextový selektor<пробел> . Umožňuje vám svázat styl CSS s prvkem vnořeným do jiného prvku a může existovat jakákoli úroveň vnoření:

<селектор 1> <селектор 2> { <стиль> }

Styl bude aplikován na volič 2, pokud je nějak vnořený volič 1.

Podívejme se na předchozí příklad, pouze při popisu pravidla CSS použijeme kontextový selektor:

div silný(
styl písma: kurzíva /* kurzíva */
}
...

Toto je normální text. Toto je text s tučnou kurzívou.

Toto je normální text. A to je také kurzívou tučný text.

Prostý text a jen tučný text

Výsledek:

Jak vidíte, tentokrát pravidlo ovlivnilo oba tagy , dokonce i ten, který je vnořený do kontejneru

a v odstavci

. Označit , který je jednoduše vnořen do odstavce

css pravidlo vůbec nefunguje.

Selektory podle atributů tagů

Selektory atributů jsou speciální selektory, které vážou styl k prvku na základě toho, zda obsahuje určitý atribut nebo má určitou hodnotu. Existuje několik možností pro použití takových selektorů.

1. Jednoduchý selektor atributů

Vypadá jako:

<селектор>[<имя атрибута тега>] { <стиль> }

A sváže styl s těmi prvky, do kterých je přidán zadaný atribut. Například:

silný(
červená barva;
}
...

Automobil jedná se o mechanický motor bez kolejí vozidlo">silniční vozidlo s minimálně 4 koly.

Výsledek:

Na obrázku vidíte, že na prvek je aplikováno pravidlo css (červená barva textu). silný, ke kterému je atribut přidán titul.

2. Volič atributů s hodnotou

Syntaxe tohoto selektoru je následující:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Váže styl na prvky, jejichž tagy mají atribut se zadaným název A význam. Příklad:

A(
červená barva;
font-size:150%;
}
...
.ru" target="_blank">Odkaz v novém okně

Výsledek:

Jak vidíte, oba prvky typu hypertextový odkaz mají atribut cílová, ale na značku se použije pravidlo css, které zvětší text odkazu jedenapůlkrát a změní jeho barvu na červenou jehož atribut cílová má význam "_prázdný".

3. Jedna z několika hodnot atributu

Některé hodnoty atributů mohou být odděleny mezerami, například názvy tříd. Chcete-li nastavit pravidlo stylu, když je požadovaná hodnota přítomna v seznamu hodnot atributů, použijte následující selektor:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Styl se použije, pokud má atribut požadovanou hodnotu nebo je součástí seznamu hodnot oddělených mezerami. Například:

{
červená barva;
font-size:150%;
}
...

Náš telefon: 777-77-77

Naše adresa: Moskva st. Sovětská 5

Získáte následující výsledek:

Pravidlo se vztahuje na prvek, jehož hodnoty atributů zahrnují: třída existuje smysl tel.

4. Pomlčka v hodnotě atributu

Pomlčka je povolena v hodnotách identifikátoru a třídy. Chcete-li svázat styl s prvky, jejichž hodnoty atributů mohou obsahovat pomlčku, můžete použít následující konstrukci:

[attribute|="value"] ( styl )
Selektor[attribute|="value"] ( styl )

Styl se použije na ty prvky, jejichž hodnota atributu začíná zadanou hodnotou, za kterou následuje pomlčka. Například:

{
červená barva;
font-size:150%;
}
...

• odstavec 1


• bod 2


• bod 3


• bod 4

Výsledek:

V tomto příkladu se pravidlo stylu vztahuje pouze na ty prvky seznamu, jejichž název třídy začíná hodnotou "Jídelní lístek- ".

5. Hodnota atributu začíná konkrétním textem

Tento selektor nastavuje styl prvku, pokud hodnota atributu tagu začíná určitou hodnotu. Mohou existovat dvě možnosti:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

V prvním případě styl platí pro všechny prvky, jejichž tagy mají atribut se zadaným název a hodnotu začínající zadanou hodnotou podřetězce. V druhém případě to samé, jen na určité prvky uvedené v hlavní volič. Příklad:

A(
barva:zelená;
váha-fontu:tučné;
}
...

Výsledek:

Příklad ukazuje, jak odlišně zobrazit externí odkazy a interní odkazy. externí odkazy vždy začínat řádkem „http://“. Proto v selektoru označujeme, že styl bude aplikován pouze na odkazy, které mají atribut href začíná významem http://.

6. Hodnota atributu končí určitým textem

Připojí styl k prvkům, jejichž hodnota atributu končí zadaným textem. Má následující syntaxi:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

V prvním případě styl platí pro všechny prvky, které mají atribut se zadaným název a má význam končící na zadané podřetězec. V druhém případě to samé, jen k naznačenému selektory. Můžete tak například různě zobrazovat různé formáty grafické obrázky. Například:

IMG (
ohraničení: 5px plná červená;
}
...

Obrázek GIF

Formát obrázku png

Výsledek:

V tomto příkladu budou všechny obrázky s příponou gif zobrazeny s červeným okrajem o tloušťce pěti pixelů.

7. Hodnota atributu obsahuje zadaný řetězec

Tento selektor váže styl na značky, jejichž hodnota atributu obsahuje konkrétní text. Syntax:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Styl se váže na prvky, které mají atribut S zadané jméno a jeho hodnota obsahuje zadané podřetězec. Například:

IMG (
ohraničení: 5px plná červená;
}
...

Obrázek ze složky galerie

Obrázek z jiné složky

Výsledek:

V příkladu je styl použit na obrázky, které se načítají ze složky "galerie".

To je vše o selektorech atributů. Všechny výše uvedené metody lze vzájemně kombinovat:

Selector[attribute1="value1"][attribute2="value2"] ( styl )

Kromě toho mi dovolte připomenout speciální selektory CSS:

• pomocí symbolů se tvoří „+“ a „~“;
• symbol ">" se váže css styly Na dceřiné společnostištítky;
• symbol<пробел>generuje kontextové selektory.

V budoucích článcích se také podíváme na pseudoprvky a pseudotřídy, které poskytují výkonné nástroje pro správu stylů.

To je vše, uvidíme se znovu.