CSS – selektory Mgr. Lenka Švancarová
CSS – selektory Hromadná deklarace slouží ke zkrácení zápisu. Místo h1 { color: #996666; background-color: rgb(255,255,102);} h2 { color: #996666; } lze psát h1, h2 { color: #996666; } h1 { background-color: rgb(255,255,102); }
CSS – selektor následníka … li a {font-weight: bold} normální text seznamu a tučný odkaz na seznam Odkaz na centrum není tučný.
CSS – selektory Selektor následníka – definice se uplatní u poslední uvedené značky (z2) v případě, že se vyskytuje uvnitř předchozí značky (z1). z1 z2 { format_dle_css } Lze vnořovat i mnohonásobně: z1 z2 z3{ format_dle_css } Termín následník označuje prvek jakkoli hluboko uvnitř předka. Nemusí tedy jít o přímého potomka.
CSS – selektory Selektor potomka se váže k prvku, který je přímým potomkem (bezprostředním následníkem) jiného prvku. z1 > z2 { format_dle_css } body > p {background-color: rgb(255,255,102);} podbarví odstavce, které jsou přímo v body. Např. na odstavec v tabulce se definice nevztahuje, protože ten je potomek buňky tabulky. Pozn.: body p {background-color: rgb(255,255,102);} se vztahuje ke všem odstavcům, protože jsou následníci body.
CSS – selektor sousedních sourozenců … h1 + p {font-weight: bold} Nadpis1 a bezprostředně za ním Tučný odstavec Lorem Ipsum Lorem Ipsum
CSS – selektory Selektor sousedních sourozenců – definice se uplatní u značky z2 v případě, že značka z2 bezprostředně následuje za značkou z1. z1 + z2 { format_dle_css } h1 + h2 { margin-top: -5px;} zmenšuje prázdný prostor oddělující nadpis1 a nadpis2, následují-li v uvedeném pořadí bezprostředně za sebou.