Здрастуйте, шановні читачі блогу . Сьогодні ми продовжимо тему вивчення таблиці каскадних стилів і наповнювати новими матеріалами довідник.
Тема селекторів в CSS, яка була розпочата в попередній статті, залишилася ще не здійснилася, бо ми розглянули тільки п’ять із семи можливих типів (тега і класу (class), Id, універсальний і атрибутів) і на черзі залишилися селектори псевдокласів і псевдоелемент.
Відносини між тегами Html коду — дерево документа
Давайте почнемо з псевдокласів. Тут, правда, спочатку потрібно буде зробити відступ. Будь-який браузер, отримуючи документ з будь-якою мовою розмітки, тут же починає його розбирати. Модуль, який відповідає у браузері за цю справу, зазвичай називають парсер — він розбирає код, що виправляє помилки і формує так зване дерево.
Результат роботи програми будь-якого браузера можна побачити з допомогою деяких модулів або розширень для цих оглядачів. Наприклад, все той же незамінний плагін для Firefox під назвою Firebug показує це саме дерево документа:
Вузли цього дерева помічені плюсиками, натиснувши на які можна буде побачити вкладені елементи мови розмітки Html. Побудова цього дерева і є результат роботи програми браузера. Давайте тепер подивимося на принципи відносини між собою окремих вузлів.
Таких взаємин може бути всього три види (дуже схоже на побудова генеалогічного дерева — відношення між родичами):
Саме по собі назву «псевдокласи» позначає те, що спеціально в коді ні в яких елементів (тегів) такі класи (значення для атрибуту Class) ніхто не прописував, але у цих самих елементів періодично можуть виникати певні динамічні стани, для яких і були придумані селектори псевдокласів.
Селектори псевдокласів — hover, focus, first-child та інші
Наприклад, селектори Visited Link і у всіх браузерах можуть використовуватися лише для оформлення гіперпосилань:
Link увазі під собою не відвідану посилання (по якій користувач ще не переходив), а Visited — відвідану. Таким чином ви можете налаштувати, наприклад, зміна кольору для вже відвіданих посилань, ну або ще щось інше (вказати візуальне стан для всіх відвіданих гіперпосилань). Природно, що відвідані будуть враховуватися саме для даного конкретного браузера і до моменту очищення його історії.
Синтаксис написання селекторів псевдокласів полягає в проставленні двокрапки після назви Html-елемента, для якого ви його використовуєте (a:visited).
a:visited {color:red;}
Наступні три селектора (active, hover і focus) можуть використовуватися для будь-яких тегів:
Active відповідає кліком лівої кнопки миші з того елементу в Html коді, назва якого ви прописали перед цим псевдоклассом в селекторі (у нашому прикладі це тег гіперпосилання A). Як тільки ліву клавішу користувач відіжме — псевдоклас active зникне.
p:active {color:red}
В цьому випадку при наведенні курсору миші на будь абзац тексту і клацнути лівою кнопкою миші, ми побачимо, що колір цього параграфа зміниться на червоний. Після віджимання кнопки колір абзацу знову повернеться до прийнятого за замовчуванням. Тобто даний псевдоклас active динамічний і буде працювати абсолютно для будь-яких тегів (наприклад, для контейнерів Div тощо). При кліці на цьому елементі він може змінити своє візуальне оформлення у відповідності з нашими побажаннями.
Hover — дозволяє змінювати зовнішній вигляд будь-якого елемента в Html коді при наведенні на нього курсора миші. При відведенні курсору візуальне оформлення елемента повернеться до використовуваного за замовчуванням.
p:hover {color:red}
Псевдоклас focus — дозволяє змінювати візуальне оформлення тегів перебувають зараз у фокусі. Як відомо, фокус на веб сторінці можна переносити за допомогою натискання на клавішу Tab на клавіатурі. Причому, фокус може передаватися тільки між такими елементами: посилання і елементи форм в Html.
Псевдокласи active і hover в браузері IE 6 працюють тільки для елементів гіперпосилань, а focus не працює взагалі ні в IE 6, ні в IE 7.
Останній псевдоклас називається first-child (перша дитина, в перекладі).
:first-child {color:red}
Цей запис буде означати, що всі елементи вихідного коду сторінки, які є першими дітьми своїх батьків, будуть пофарбовані в червоний колір.
First-child в IE 6 не працює, що сумно.
Селектори псевдоелемент — first-line (letter), after та before
Під час розробки концепції CSS планувалося писати селектори псевдоелемент з подвійним двокрапкою, щоб відрізняти їх від псевдокласів, але поки синтаксис такий, що всі вони записуються з одним двокрапкою. Можливо, що в майбутньому будуть вводити відповідні зміни.
Щодо самого слова «псевдоелементи» зрозуміло, що таких тегів в Html коді немає. На даний момент псевдоелемент всього чотири і вони наведені на розташованому трохи вище малюнку. Напевно, зрозуміло з самої назви, що first-line буде вказувати на першу лінію, а first-letter — на першу букву.
Причому, обидва цих псевдоэлемента застосовуються тільки до блочних тегам (заголовки, абзаци, контейнери тощо) і як це не сумно, але в браузері IE 6 вони теж не працюють.
p:first-line {color:red}
Що це дасть? У всіх параграфах на веб сторінці перші рядки тексту забарвляться в червоний колір. Для простоти підключимо CSS до мови Html за допомогою тега style і пропишемо відповідне властивість з використанням псевдоэлемента first-line в селекторі параграфа:
Тоді, як ми і планували, всі перші рядки в абзацах забарвляться в червоний колір:
Ну, а з допомогою first-letter можна зробити, наприклад, так звану буквицю (коли перша літера в абзаці відрізняється великим розміром і кольором). Для цього можна буде прописати наступні CSS плавила для даного селектора псевдоэлемента:
p:first-letter {font-size:5em; float:left; color:red}
Про Em, Ex, пікселі і інші розмірності в CSS ми з вами вже говорили. Вихідний код з доданими властивостями тоді буде виглядати так:
А сама веб-сторінка з буквицей, створеної з допомогою селектора first-letter, виглядатиме так:
Два залишилися псевдоэлемента after та before потрібні для формування контенту на льоту. Давайте подивимося на прикладі:
p:after {
content: «»;
color:red;
}
В результаті, в кінці кожного абзацу на веб автоматично додасться той фрагмент, який ми вказали в CSS властивості «content» (воно використовується тільки для псевдоелемент after та before) і цей фрагмент буде забарвлений в червоний колір:
Якби ми замість «after» використовували б «before», то додатковий контент був би додано всередині кожного абзацу на сторінці, але вже перед його вмістом. Напрошується питання — а для чого це можна використовувати на практиці?
Виявляється, з допомогою цих псевдоелемент можна, наприклад, створити складну нумерацію виду «5.2.13». Звичайними засобами Html цього зробити не можна, а з використанням before — можна.
Для того, щоб отримати такий складно нумерований список, використовується досить простий Html код:
Але при цьому має місце складний код CSS стилів з використанням, природно, псевдоелемент after та before:
Все дуже здорово, але, на жаль, after та before не підтримуються в браузерах IE IE 6 і 7. На жаль і ах. У наступній статті ми поговоримо про комбінації CSS селекторів і їх пріоритетність.
Удачі вам! До зустрічей на сторінках блогу
