CSS - родители, деца, псевдокласове

В предишния урок разгледахме как с използването на класове (class) и идентификатори (id) можете да ограничите обхвата на действие на една стилова команда. Сега ще видим какви други методи за прецизен контрол на стиловите команди съществуват.

Родители, наследници и деца

Родители и наследници

Често елементите в една HTML страница могат да бъдат включени в други елементи. Например в следния параграф хипервръзката <a> е включена в елемента <em>, а той от своя страна - в параграфа <p>:

<p>Посетете следната <em>интересна <a>страница!</a></em></p>

Прието е включеният елемент да се нарича наследник, а включващият елемент - родител. В случая <p> се явява родител на елементите <em> и <a>, а <em> - на елемента <a>. Съответно <em> е наследник на елемент <p>, а <a> се явява наследник на <em> и <p>.

Отношенията родител-наследник са особено полезни за конкретизиране обхвата на действие на CSS команди. Например със следната команда можете да премахнете подчертаването на хипервръзките в параграф с клас menu (някои уеб дизайнери предпочитат такъв стил за главното меню):

p.menu a {text-decoration: none}

Ползата от този подход е, че клас се указва само веднъж - за параграфа, вместо за всяка хипервръзка по отделно: опитай сам.

Обърнете внимание как първо се изписва името на елемента родител (евентуално с името на класа или идентификатора), а след оставяне на празен интервал - и името на наследника.

Родители и деца

CSS дава възможност за използване на още един вид отношения на елементи: родители-деца. Разликата с отношението родители-наследници е, че дете може да бъде само елемент, който е непосредствено включен в родителя. В примера с параграфа

<p>Посетете следната <em>интересна <a>страница!</a></em></p>,

<em> е дете на <p> и <a> е дете на <em>, но <a> не е дете на <p>.

Стил за деца може да се укаже по следния начин:

em>a  {text-decoration: none}

Тази команда ще премахне подчертаването на всички хипервръзки-деца на елемент <em>

Псевдокласове

С използване на т.нар. псевдокласове имате възможност за създаване на специални ефекти за някои селектори. Псевдокласове най-общо се задават по следния начин:

селектор:псевдоклас {свойство:стойност}

Нека разгледаме няколко конкретни примера.

Псевдоклас link

С псевдоклас link можете да промените стила на хипервръзките (които по принцип са сини на цвят и подчертани):

a:link {color:#00FFFF; text-decoration:none}

Псевдоклас visited

С псевдоклас visited се указва стил за вече посетени хипервръзки:

a:visited {color: #FFFF00}

Псевдоклас hover

Псевдоклас hover се използва за указване на стил за елемент, върху който се намира показалеца на мишката. Най-често с псевдоклас hover се използват хипервръзки:

a:hover {color:red}

Тази CSS команда ще превърне всяка хипервръзка в червена докато показалецът на мишката се намира върху нея.

Псевдоклас hover може да се използва и за други елементи. Например падащите менюта от рода на Suckerfish и техните производни (примерно Superfish) използват псевдоклас hover с неподредени списъци. При посочване на главното меню, hover стилът се активира и в резултат се показва подменюто. По-старите версии на Internet Explorer поддържат псевдоклас hover само за хипервръзки, но има начини за заобикаляне на тези ограничения.

Псевдоклас active

Псевдоклас active задава стил за елементи, върху които се кликва в дадения момент. Псевдоклас active често се използва с хипервръзки:

a:active {color: #AAAA00}

Ако използвате комбинация от псевдокласове за хипервръзки, трябва да спазвате реда link - visited - hover - active в декларирането им. В противен случай стилът няма да бъде изпълнен. Можете да изпробвате четирите псевдокласа в примера опитай сам

Псевдоклас first-child

Псевдоклас first-child се iзползва за указване на стил за първото дете на даден елемент. Например можете да направите първия параграф на всяка страница с шрифт italic като приложите псевдоклас first-child към параграфите:

p:first-child {font-style: italic}

Ето и един малко по-сложен пример, който прави зелена първата хипервръзка във всеки параграф:

p > a:first-child {color: green}

Псевдоклас focus

Псевдоклас focus дава възможност за прилагане на стил към елемент за въвеждане на данни от клавиатурата. Стилът става активен, когато елементът е извикан на фокус - т.е. когато може да се въвежда в него. Един често срещан пример е задаването на фонов цвят (например розово) или рамка на поле за въвеждане:

input:focus {background-color: pink}

Примерът опитай сам съдържа добре познато приложение на псевдоклас focus - извикване на синя рамка около полето за въвеждане на име или парола в страницата за вписване в e-mail системата на yahoo.