Можете да достъпите така наречените детски елементи. Това са такива, които са директни поделементи на други елементи. Това звучи малко абстрактно, но може да се обясни много добре с помощта на пример.
<body> <p>Параграф 1</p> <p>Параграф 2</p> <p>Параграф 3</p> </body>
Тук body е родителският елемент. Елементите p са съответно деца на body. Използвайки това знание, може да се приложи селекторът за детски елементи.
body>p {
color: blue;
}
Тази синтакса задава всички параграфи, които са директни деца на body, в синьо.
Следващият пример показва отново разликите между двете инструкции body p и body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<div>
<p>Параграф 4</p>
</div>
</body>
</html>Първите три дефинирани текстови параграфа са директни деца на body. Инструкцията body p задава всички текстови параграфи в синьо. body>p, от друга страна, въздейства само върху първите три текстови параграфа. Затова тези параграфи се показват с по-голям шрифт.
Следващата стъпка е да ви представя Фолоу-елемент селектора. Този селектор маркира елемент, който непосредствено следва друг елемент и също има същия родителски елемент. Пак с пример:
h1+p {
color: blue;
}
Чрез тази синтакса цветът на текста в параграфа се задава на синьо. Това обаче важи само ако параграфа непосредствено следва първоначален заглавен текст.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Заглавие</h1>
<p>Параграф 1</p>
<h2>Заглавие</h2>
<p>Параграф 2</p>
<p>Параграф 3</p>
<div>
<p>Параграф 4</p>
</div>
</body>
</html>Проверете резултата в браузъра.
Само първият параграф се показва в синьо. Останалите параграфи са черни. Това се дължи на факта, че тези p елементи не следват h1, а следват h2.
С оглед на последващите елементи, в CSS3 бяха въведени още възможности. Сега е възможно да се достъпи всички последващи елементи на определен елемент. Едно примерно решение:
h1~p {
color: red;
}
Чрез тази синтакса се обръщат към всички параграфи, които следват h1.
Всъщност може да достъпите не само елементи директно, но е възможно и достъпът чрез атрибутите на елементите.
Ето някои от тези селектори:
• [att] - Елементът трябва само да съдържа атрибута. Дали ще се предава стойност, е незначително.
• a[href] - Маркират се всички хипервръзки (<a href=…>). За дефинициите на маркери (<a name=…>) това не важи.
• [align=left] - Маркират се всички елементи, чийто атрибут align има стойност left.
• [attr~=value] - Маркират се всички елементи, в които стойността e включена в списък, разделен с интервали.
• [attr|=value] - Маркира се елемент, ако указаната стойност се намира в началото на поредица от символи разделени с тире в атрибута.
• img[width="200"] - Тук се маркират всички графики, които имат ширина от 200 пиксела.
Разбира се, въпросът е кога всъщност може да са нужни такива атрибутни селектори. Мислете например за форма и определени в нея отметчици. Отметчиците се дефинират - вече знаете - чрез елемента за въвеждане на текст. Проблемът е: Елемента за въвеждане на текст се използва също и за дефиниция на нормални текстови полета. Следователно няма начин да направите различно оформление за отметчиците и текстовите полета за въвеждане на текст. Точно на този пункт влизат атрибутните селектори. За по-добро разбиране на тях хвърлете един поглед на следния пример:
<body> Name: <input type="text" id="name" /> <br /> Мъж: <input type="checkbox" name="gender" id="gender" /> <br /> Жена: <input type="checkbox" name="gender" id="gender" /> </body>
Тук са дефинирани различни формови елементи.
• едно текстово поле за въвеждане на текст
• две отметчици
Тези полета трябва да бъдат форматирани.
input {
border:3px solid #000;
width: 10em;
}Полетата се назначават с рамка и ширина.
Проблемът тук е, че дефинираната ширина трябва да се приложи само на полетата за въвеждане на текст, но не и на отметките. Въпреки това, с елементен селектор няма начин да се направи разграничение между различните типове полета. За да изработите такава разграничение, се използват селектори на атрибути. Ето пример за това как може да изглежда нещо подобно:
input[type="checkbox"] {
width: auto;
}
Чрез показания селектор се достъпва реално само тези елементи input, които имат комбинация на атрибут-стойност type="checkbox".
Повторения
Сега CSS най-накрая предлага и възможност за обработка на повторения. Разбира се, въпросът е за какво това може да бъде полезно. Тези селектори са полезни, например когато искате да оцветите в различни цветове всеки втори ред на таблица. Преди да представя наличните селектори, един много типичен пример:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Това е обикновен списък с изброяване. Чрез CSS всеки трети елемент на списъка трябва да получи цвят на фона.
За целта се използва селекторът nth-child(). Чрез този селектор се засяга всяко n-то дете.
#sprachen li:nth-child(3n) {
background-color: red;
}
Следните селектори са на разположение:
• :root - Чрез селектора :root може да се избере корена на един документ.
• :nth-child(n) - Управлява всяко n-то елемент в рамките на родителски елемент. Този селектор е особено полезен, когато трябва да се представят няколко елемента по различен начин. n представлява фиксирана ключова дума, към която могат да се приложат математически операции. n може да се изравни със стойността 1.
• :nth-last-child(n) - Управлява всяко n-то елемент в един елемент, като елементите на децата се обхождат отзад напред.
• :nth-of-type(n) - Управлява всяко n-то елемент от същия тип HTML на едно и също ниво.
• :nth-last-of-type(n) - Управлява всяко n-то елемент на същото ниво, като елементите се обхождат отзад напред.
• :first-child - Управлява първото дете в рамките на елемент.
• :last-child - Управлява последното дете в рамките на елемент.
• :first-of-type - Управлява първият елемент от същия тип HTML в рамките на родителски елемент.
• :last-of-type - Управлява последният елемент от същия тип HTML в рамките на родителски елемент.
• :only-child - Управлява елемент, който няма братя и представлява единственият детски елемент в горния елемент.
• :only-of-type - Управлява елемент, който няма други братя от същия тип HTML и представлява единственият детски елемент от този вид в горния елемент.
• :empty - Управлява празните елементи.
Представените селектори значително улесняват работата с HTML, като прекиства сложни дефиниции на класове от миналото.
