Селектори в CSS

Добре структурований документ являє собою каркас, до якого застосовуються стилі. Щоб можна було присвоїти стиль елементу, визначеному у таблиці CSS, потрібно будь-яким чином ідентифікувати дані елементи. Для ідентифікації елементів застосовуються селектори, яким приділено увагу в даній темі.

Звичайні селектори

При створенні дизайнів найчастіше застосовуються селектори типів і спадні селектори.

Селектор типу використовується для надання стилю всім елементам відповідного типу, наприклад гіперпосиланням, абзацам, заголовкам. Для створення селекторів типу потрібно всього лише помістити в таблиці CSS ім'я елемента перед визначенням стилю:
а{ text-decoration: underline }
p{ color: black }
h2{ font-weight: bold }

Спадні селектори дозволяють привласнювати стилі елементам, вкладеним в задані елементи або групи елементів. Спадний селектор створюється шляхом додавання пробілу між двома селекторами.

Розглянемо приклад, де заданий стиль буде присвоюватися тільки гіперпосиланням, вкладеним в елементи списків (дескриптор li). Даний стиль не вплине на гіперпосилання, розташовані в простих абзацах.
li а{ color: #000 }

Розглянуті типи селекторів призначені для присвоєння стилів всім зазначеним в них елементам сторінки. Для більш специфічного завдання елементів використовуються селектори ідентифікаторів і класів. З їх допомогу можна привласнювати стилі елементам, які мають вказане ім'я ідентифікатора або класу. У визначенні селектора ідентифікатора використовується символ "#", а у визначенні селектора класів - символ "." (крапка). У наведеному нижче прикладі перший стиль присвоює напівжирний шрифт елементу "myElement", а другий задає виведення всіх елементів класу "datePost" червоним кольором:
#myElement{ font-weight: bold }
.datePost{ color: red }

Даними діями ми задали властивості селекторів, а тепер підключимо їх в документі:
<р id='myElement'>Деякий текст</p>
<р class='datePost'>11 січня 2011</p>

Багато дизайнерів зловживають іменами ідентифікаторів і класів. Наприклад, якщо потрібно стилізувати заголовки в різних областях сторінки по різному, вони створюють кілька класів стилів і присвоюють різні класи кожному заголовку. Тим часом існує більш простий і елегантний спосіб вирішення цього завдання. Різні області сторінки можна укласти в елементи "div", а потім присвоїти стилі елементам "div" на основі ідентифікаторів, як у наведеному далі прикладі. Щоб стилі присвоювалися тільки заголовкам "h1", використовуються спадні селектори:
#mainContent h1{ font-size: 10px }
#secondaryContent h1{ font-size: 12px }

Реалізація здійснюється так:
<div id='mainContent'>
<h1>Перший заголовок</h1>
...
</div>
<div id='secondaryContent'>
<h1>Останні новини</h1>
...
</div>

Наведений приклад простий і очевидний. Проте застосовані в ньому два типи селекторів надають потужний і гнучкий інструмент присвоєння стилів величезній кількості елементів. Кількість класів має бути якомога меншою. Занадто велика кількість класів - вірна ознака того, що документ погано структурований. Щоб зменшити їх кількість, подумайте, чим елементи різних класів відрізняються один від одного. Досить часто виявляється, що вони відрізняються тільки зовнішнім виглядом на екрані. Замість присвоєння їм різних класів спробуйте привласнити клас чи ідентифікатор їх батьківського елементу, а потім присвоюйте їм стилі за допомогою низхідних селекторів.

Псевдокласи

У деяких випадках елементу потрібно присвоїти стиль не на основі структури документа, а за іншими ознаками, наприклад залежно від стану елемента форми або гіперпосилання. Це можна зробити за допомогою селектора псевдокласів.
/* Присвоєння синього кольору не відвідуваних гіперпосилань */
a:link{ color: blue }
/* Присвоєння зеленого кольору відвіданих гіперпосилань */
a:visited{ color: green }
/* Присвоєння червоного кольору гіперпосиланням, на яку наведений покажчик миші, і активним гіперпосиланням */
a:hover, a:active{ color: red }

Директиви ":link" і ":visited" є псевдокласи гіперпосилань. Їх можна підключати тільки до гіперпосилань. Директиви ":hover", ":active" є динамічними псевдокласами. Теоретично їх можна підключати до будь-якого елементу. Але потрібно стежити за версіями браузерів, тому що від їх залежить коректність відображення інформації відформатованої даними селекторами.

Універсальний селектор

Один з найбільш потужних і найменш популярних типів селекторів є універсальний селектор. Він служить як би метасимволом, що заміщає будь-який доступний елемент. Як і метасимвол в текстовому коді, універсальний селектор позначається символом зірочки "*". Зазвичай універсальний селектор застосовується для стилізації кожного елемента сторінки.

Наприклад, за допомогою наступного правила можна скасувати вивід за замовчуванням зовнішніх і внутрішніх порожніх рамок для кожного елемента сторінки.
*{ padding: 0; margin: 0 }

У поєднанні з іншими селекторами універсальний селектор можна застосувати для стилізації всіх дочірніх елементів заданого елемента.

Додаткові селектори

Таблиці CSS підтримують багато інших корисних селекторів, крім розглянутих вище. Також потрібно сказати, що таблиці CSS розроблялися з урахуванням зворотної сумісності. Якщо браузер не розуміє селектор, він повністю ігнорує все правило. Завдяки цьому ви можете витончено стилізувати і прикрашати свою сторінку для новітніх браузерів, при цьому в старих браузерах сторінку не буде зруйновано, а всього лише будуть опущені деякі прикраси. Не забувайте тільки, що додаткові селектори не слід застосовувати до елементів, критичних для правильного функціонування сайту.

Дочірні та суміжні селектори

Перший з додаткових селекторів - дочірній. Порівняйте: низхідний селектор присвоює стиль всім вкладеним елементам, а дочірній - тільки одному елементу, безпосередньо дочірньому. Дочірній селектор позначається символом ">". Наведений нижче стиль виводить напівжирним шрифтом тільки елементи першого рівня списку. На елементи вкладеного рівня списку стиль не впливає.
#nav > li{ font-weight: bold }

І застосування:
<ul id='nav'>
<li>Перший список</li>
<li>Перший список
<ul>
<li>Другий список</li>
<li>Другий список</li>
</ul>
</li>
<li>Перший список</li>
</ul>

Для браузерів IE6 і нижче дочірній селектор можна імітувати за допомогою універсального селектора. Для цього потрібно спочатку застосувати стиль для всіх вкладених елементів за допомогою спадного селектора, а потім перевизначити стилі всіх елементів, вкладених в дочірній елемент. Отже, попередній приклад можна переписати так:
#nav li{ font-weight: bold }
#nav li *{ font-weight: normal }

Стилізувати елемент можна також на основі його близькості до іншого елементу. За допомогою суміжного селектора можна привласнити стиль елементу, який передує зазначеному. Суміжний і зазначений елементи повинні мати один і той же батьківський елемент. Суміжний селектор позначається символом "+". За допомогою суміжного селектора можна, наприклад, вивести напівжирним шрифтом абзац, розташований безпосередньо під заголовком, не зачіпаючи інші абзаци.
h1 + p{ font-weight: bold }

І безпосередня організація даного методу:
<h1>Заголовок</h1>
<p>Перший абзац</p>
<p>Другий абзац</p>

За допомогою селектора атрибутів елементу можна привласнювати стиль на основі наявності атрибута або значення, присвоєного атрибуту. Це дозволяє застосовувати цікаві та потужні рішення.

При наведенні курсору миші на елемент з атрибутом "title" більшість браузерів виводять підказку. Припустимо, ви хочете виводити підказку при наведенні курсору на абревіатуру:
<abbr title='Cascading Styles Sheets'>CSS</abbr>

Однак, не навівши вказівник на абревіатуру, відвідувач не бачить, що може отримати додаткову інформацію. Отже, не знаючи про цю можливість, він її не отримає. Для вирішення цієї проблеми потрібно будь-яким чином відзначити елементи, що надають підказку. Це можна зробити за допомогою селектора атрибутів. У даному прикладі ми можемо на основі атрибута "title" присвоїти елементам підкреслення суцільною лінією. Можна також надати відвідувачеві контекстуальну інформацію про елемент, задавши за допомогою псевдокласу ":hover" зміну зовнішнього вигляду курсору на знак питання під час наведення його на елемент. У таблицях стилів CSS селектори атрибутів позначаються квадратними дужками.
abbr[title]{ font-size: 14px; border-bottom: 1px solid red }
abbr[title]:hover{ cursor: help }

Стилізувати елементи можна не тільки на основі наявності атрибутів, але й залежно від присвоєних їм значень. Розглянемо наступний приклад. Сайти, з якими сторінка пов'язана з допомогою атрибуту "rel" із значенням "nofollow", не отримують в рейтингу Google ніяких переваг. Наведене нижче правило виводить зображення в якості фону такого гіперпосилання, щоб відзначити несхвалення цільового сайту.
a[rel=' nofollow']{ background-image: url(' nofollow.gif' ); padding-right: 10рх }

Один зі способів використання селекторів атрибутів заснований на тому, що браузери IE6 і нижчі версії не підтримують їх. Отже, дизайнер може призначити один стиль для IE і інший - для більш досконалих браузерів, що узгоджуються зі стандартами. Наприклад, в IE виникають проблеми при виведенні однопіксельної пунктирної рамки. Замість пунктирної лінії виводиться штрихова. За допомогою селектора атрибутів можна задати вивід пунктирної рамки тільки для браузерів, які можуть правильно вивести її. У наведеному нижче прикладі для цього використовується атрибут "class", а не селектор класу.
.intro{ border-style: solid }
[class='intro']{ border-style: dotted }

Деякі атрибути можуть мати кілька значень, розділених пробілами. Селектор атрибутів дозволяє привласнювати стиль елементу на основі одного з цих значень. Припустимо, група розробників домовилися використовувати певні ключові слова в атрибутах гіперпосилань для визначення зв'язків між власниками сайтів. Цю інформацію можна використовувати для виведення зображень гіперпосилань, що містять в атрибуті "rel" ключове слово "friend" (друг).
a[rel='friend']{ background-image: url( 'friend.gif' ) }

І застосування:
<а href="http://mysite.com/" rel="friend">Мій сайт</а>

Коли розглянуті вище селектори CSS будуть підтримуватися більшістю браузерами, необхідність додавання додаткових дескрипторів і класів істотно знизиться.
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

KovelX - безкоштовні оголошення

Photo KovelX
Photo KovelX
350 грн.
Photo KovelX
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
Photo KovelX
25 грн.
Photo KovelX
45 грн.
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
130 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.

Читайте нас також: