Здрастуйте, шановні читачі блогу . Сьогодні ми продовжимо наповнювати матеріалами наш Довідник і почнемо говорити про такий фундаментальної речі, як селектори в мові CSS.
Їх існує сім видів — тега, класу (class), Id, універсальний, атрибутів, а так само псевдокласів і псевдоелемент. Забагато, чи не правда? Ну, нічого, потихеньку розберемо їх всі і при тому на докладних прикладах.
У попередніх публікаціях ми вже встигли розглянути як підключається CSS Html коду, а так само познайомилися з одиницями розмірів, такими як піксель, Em і Ex і дізналися про принципи спадкування в CSS. Ну, а сьогодні ми, як я і говорив, відкриваємо дуже серйозну главу у вивченні мови стильової розмітки.
Селектори тегів і класів (class) у мові CSS
Перш, ніж вивчати стильові правила, необхідно буде дізнатися, як і за якими принципами задавати ті мітки, за якими браузер зрозуміє, до яких саме елементів Html коду потрібно їх застосовувати. Селектори бувають різні. Найпростіші, з точки зору розуміння, використовують назви тегів, до яких повинні будуть застосовуватися написані після них правила мови CSS.
У даному прикладі для всіх тегів абзацу P використовуватиметься червоний колір шрифту сірий колір заливання фону. У будь-якого CSS правила може бути прописано відразу кілька селекторів. Як потрібно їх буде читати при цьому? Завжди справа наліво, тобто починати з самого близького до відкриваючої фігурній дужці.
У наведеному прикладі у першому рядку показаний селектор тега (елемента), який наказує використовувати червоний колір шрифту для всіх контейнерів Div.
Вміст звичайного контейнера Div
Вміст звичайного контейнера Div
У другому рядку ми бачимо приклад складного селектора, в якому у нас з’являється такий новий елемент, як клас (class). Він прописується в якості атрибуту будь-якого тега Html коді. Значення class ми можемо використовувати довільне ім’я, використовуючи символи [0-9],[a-z],[A-Z],[_],[-].
Але крім class в мові стильової розмітки використовується ще і Id. Чим відрізняється клас від Id? Значення останнього повинно бути унікальним, оскільки Id є унікальним ідентифікатором для Html тега і його назва (значення) може використовуватися в коді тільки один раз.
А значення для class не є унікальним і може використовуватися для як завгодно великої кількості елементів в коді. Тобто різні теги (Div P, H1 і т. д) можуть мати однакове значення свого атрибут class:
А як він використовується в селекторах CSS? Виявляється, що його ім’я пишеться з поставленої попереду точкою.
Тому, коли ми бачимо в коді CSS щось починається з точки, то відразу розуміємо, що мова йде про клас. Якщо розглядати приклад наведений на скріншоті, то тепер у всіх елементах Html коду, де буде прописано «class» зі значення «Blue», текст буде пофарбований у синій колір.
Але це станеться зовсім не з-за того, що назва класу ми вибрали «Blue». Можна було назвати як завгодно (хоч «xyz»), а колір у нашому прикладі задається саме CSS правилом «color:blue» приписаним для селектора з цим класом. Сподіваюся, це зрозуміло? Давайте поміняємо назва (значення) class в прикладі:
Абзац з текстом
Абзац з текстом
Тобто тепер у нас клас XYZ і призначене для нього правило:
.xyz {color:blue}
пофарбував текст абзацу в синій колір. Цей приклад ще раз підкреслює, що назва атрибут class можна використовувати будь-який. Однак, продовжимо.
Давайте ще раз подивимося на прикладі, як використовуються селектори тегів і класів CSS. Уявімо, що у нас прописані наступні стильові правила:
div {color:red}
div.a123 {color:green}
.xyz {color:blue}
А так ж уявімо, що в Html коді у нас присутні наступні елементи:
Згідно з прописаними правилами для зазначених селекторів вміст наведених елементів Html коду повинне буде виглядати так:
А тепер давайте подивимося, чому саме так браузер інтерпретував стильове оформлення даних елементів Html коду. Для першого контейнера Div, в якому не прописано жодного class, буде діяти CSS правило застосовне для всіх контейнерів: div {color:red}. Отже, його вміст буде пофарбовано в червоний колір. Що і потрібно було показати.
В теге другого Div у нас прописаний клас «a123». У цьому випадку будуть застосовуватися CSS правила відповідні «div.a123» (бо у нас як раз є в наявності тег Div з прописаним в ньому атрибутом class=»a123″). Тому вміст другого контейнера буде пофарбовано в зелений колір.
Але ви, напевно, помітили, що до другого Div можна застосувати і перше правило CSS «div {color:red}», бо воно призначене для всіх контейнерів без винятку. Виходить протиріччя, яке вирішується в CSS шляхом введення поняття пріоритетів CSS селекторів.
Ми з вами про це поговоримо докладно трохи пізніше, ну, а зараз я просто скажу, що пріоритет «div.a123» (для другого Div у розглянутому прикладі) буде вище.
До речі, схожа ситуація виникає і з третім Div з нашого прикладу. До нього підходять відразу два варіанти: селектор тега «div» і класу «.xyz». Знову ж таки в силу поки не пояснених мною причин (читайте про це наведено трохи вище посиланню), пріоритет останнього буде вище, тому вміст третього контейнера буде пофарбовано в синій колір.
Давайте рухатися далі. У наведеному прикладі у нас далі йде тег абзацу P, в якому прописаний class=»a123″. Виходить так, що даний елемент не потрапляє ні під один з трьох прописаних нами селекторів (всі три повз нього промахнулися).
У нього є тільки перетин з другим варіантом, однак цей селектор буде використовуватися тільки для тегів «Div» з класом «a123», але ніяк не для тега абзацу P. В результаті колір тексту в цьому абзаці залишиться прийнятим за замовчуванням, тобто чорним.
Далі в прикладі у нас слід елемент параграфа з class=»xyz». Для нього буде застосовуватися останнім CSS правило «.xyz {color:blue}». Отже, текст цього абзацу буде забарвлений в синій колір. Тут, думаю, все зрозуміло.
Універсальний селектор і унікальний ідентифікатор ID
Тепер давайте перейдемо до Id, про яких я вже встиг згадати. Коли ми в коді CSS бачимо що то зі що стоїть попереду ґратами (сумі), то це означає, що ми маємо справу з Id:
Зазвичай цей селектор пишуть без згадки тега, до якого він відноситься (перший варіант на наведеному трохи вище прикладі), хоча другий варіант написання теж допустимо, але вживається рідко. Пов’язано це з тим, що значення атрибута Id в коді буде унікальним, а значить не може бути двох елементів з однаковими значеннями Id. Тобто немає сенсу уточнювати, хоча це не забороняється.
Тому зазвичай просто пишуть хеш (решітку), а відразу за ним значення (назва) атрибута Id. Припустимо, що у нас прописано наступне правило для Id:
#back {color:red}
а в коді є наступний фрагмент:
Контейнер Div з унікальним ідентифікатором
який в результаті застосування до нього правила, що стоїть після «#back», буде інтерпретується браузером так:
Контейнер Div з унікальним ідентифікатором
Так само в CSS передбачений і універсальний селектор позначається зірочкою, яка показує, що дане правило буде застосовуватися взагалі до будь-якого елементу в коді:
* {color:black}
У цьому випадку текст, укладений в будь-тег, що буде чорним (колір за замовчуванням). Зрозуміло, що всі інші селектори (тегів, класів і Id) будуть мати пріоритет вище, ніж у універсального.
Селектори атрибутів і їх майбутнє в сучасному CSS
Всі описані вище варіанти (тега, класу, Id і універсальний), які будуть працювати абсолютно у всіх браузерах. Але існують ще варіанти, работающипе не скрізь.
До такого типу належать селектори атрибутів, які дуже зручні і дозволяють істотно розширити і одночасно спростити можливості точкового впливу на верстку, але які, на жаль, не мають стовідсоткової підтримки всіма браузерами.
Як ви, напевно, пам’ятаєте, в мові Html всередині тегів ми можемо використовувати різні атрибути, які дозволяють надати певні властивості вмісту цих елементів. Тому було б логічно і в мові CSS використовувати в якості селекторів не тільки назви тегів, але і назви атрибутів.
Власне, ми це вже робили, коли розглядали class і Id, бо вони по суті були атрибутами якихось тегів. Просто Айді і Клас мають дуже велике значення у верстці і їх винесли в окремі групи, кожен зі своїм власним синтаксисом.
А як використовувати в селекторах інші існуючі в мові Html атрибути (не Id і не class)? Досить просто — укладати їх у квадратні дужки:
[title] {color:green}
Тепер будь-який тег в Html коді, у якого буде прописаний «title», буде мати зелений колір тексту.
Дуже зручно, на мій погляд. Але вся проблема використання селекторів атрибутів полягає в тому, що в браузері IE 6 і нижче вони не працюють взагалі або працюють, але тільки частково. Доки частка користувачів виходять в інтернет за допомогою IE 6 не буде дорівнює нулю, цей зручний спосіб, найімовірніше, не дістане широкого поширення при верстці. Але тим не менш, знати про їх існування і вміти їх використовувати потрібно.
Як ви бачите з прикладу, не важливо, чи має атрибут зазначений у селекторі якесь значення або він порожній. Але це ще далеко не все, що можна з ним робити, бо це просто пісня.
В них можна вказувати не тільки назва атрибуту, але і його значення:
[title=»Перший параграф»] {color:green}
В результаті CSS правила, прописані для такого селектора, будуть застосовуватися тільки для того тега, у якого є «title» зі значенням «Перший параграф» (у нашому прикладі це буде друга строчка):
Описаний приклад представляв з себе суворе рівність, але можна написати цей селектор і так:
[title~=»параграф»] {color:green}
Т. о. дане правило CSS застосувати тільки до тих елементів Html коду, у яких «title» міститься слово «параграф» (у нашому прикладі це буде друга і третя рядка):
Синтаксис селектора атрибута інтерпретує «~=» як «міститься слово». Наприклад, для елемента з title=»Другим параграфом» CSS правило «color:green» вже застосовуватися не буде.
Але можна замість цього поставити «*=» і тоді будуть враховуватися не тільки окремі слова зазначені в селекторі, але і частини слів (будь-який шматок тексту, що міститься в будь-якому місці атрибута):
[title*=»параграф»] {color:green}
У цьому випадку і для елемента з title=»Другим параграфом» спрацює правило «color:green» і його текст подкрасится зеленим кольором. Сподіваюся, що це зрозуміло. Є ще такий оператор як «^=» (все що починається з зазначеного в дужках значення), який допомагає створити подібний селектор атрибута:
[href^=»http»] {color:red}
Ви, напевно, пам’ятаєте, що атрибут Href використовується гіперпосилання для вказання Url адреси у відносних або абсолютних посиланнях. Так ось, досить часто внутрішні посилання на сайті роблять відносними, а зовнішні по іншому, як зробити абсолютними, ніяк не вийде.
Отже, усі зовнішні посилання будуть починатися з «http», а внутрішні можуть задаватися у відносному вигляді без використання «http». Т. о. прописаний у нашому прикладі селектор [href^=»http»] дозволить пофарбувати всі зовнішні посилання на сайт (всі абсолютні) в червоний колір. Ну, а відносні, які не містять http залишаться того кольору, який був прийнятий для них за умовчання. На мою супер!!!
Як ви можете бачити, селектори атрибутів дають нам масу можливостей і те, що вони ще широко не використовуються, є заслугою дуже бідною і скривдженої долею компанії Мелкософт, а зокрема їх дітища IE 6. Але поступово вони починають застосовуватися в CSS і незабаром, звичайно ж, проб’є собі дорогу в життя.
Так, є ще один оператор «$=» — все, що закінчується на зазначене в лапках значення:
[title$=»раф»] {color:green}
В результаті в зелений колір будуть пофарбовані друга і третя рядок з нашого першого прикладу, т. к. значення «title» у них закінчується на «раф». Ось так чудово працювали б селектори атрибутів в сучасній мові CSS, якби не існував досі певний відсоток користувачів юзающих браузер IE 6.
Власне, з усіх типів нам залишилося розглянути лише два: селектори псевдокласів і псевдоелемент. Але я хочу перенести на наступну статтю, де ми так само поговоримо і про їх різні комбінації.
Удачі вам! До зустрічей на сторінках блогу
