У цій статті ми поговоримо про селекторах стилів. В одній з статті ми вже торкалися теми селектор, зокрема селектори тегів і стильові класи. А сьогодні розглянемо ще декілька видів селектор, які не відкрито прив'язують правило стилю до елементу веб-сторінки. Це так звані спеціальні селектори. Їх буває декілька видів.
Комбінатори в CSS (Сусідній, дочірній і контекстний селектори)
Навчися створювати професійні сайти на HTML5 та CSS3
Комбінатори - це різновид css селектор, які прив'язують правило стилю до елементу web-сторінки на підставі його місця розташування відносно інших елементів.
Перший комбінатор символ плюс (+) або сусідній селектор. Плюс встановлюється між двома селекторами:
<селектор 1> + <селектор 2> <<стиль>>
Стиль в цьому випадку застосовується до селектора 2. але тільки в тому випадку якщо він є сусіднім для селектора 1 і йде відразу після нього. Розглянемо приклад:
strong + i color: red; / * Червоний колір тексту * /
>
.
Це звичайний текст. Це жирний текст, звичайний текст, червоний текст до нього застосував право сусідніх селектор.
Це звичайний текст. Це жирний текст, звичайний текст, і це звичайний текст.
Стиль описаний в прикладі буде застосований лише до першого тексту укладеним в тег . тому він слід відразу ж після тега .
) Також застосовується до сусідніх селекторам, але в цей раз між ними можуть бути інші елементи. При цьому обидва селектора повинні бути вкладені в один і той же батьківський тег:
Стиль буде застосований до селектору 2. який повинен слідувати за селектором 1. Розглянь приклад:
i color: red; / * Червоний колір тексту * /
>
.
Це звичайний текст. Це жирний текст, звичайний текст, червоний текст до нього застосував право сусідніх селектор.
Це звичайний текст. Це жирний текст, звичайний текст, а це червоний текст.
Як бачимо, в цей раз правило стилю спрацювало для обох текстів укладених в тег . незважаючи на те, що в другому випадку між тегом і варто тег .
Комбінатор> відноситься до дочірніх селекторам. Дозволяє прив'язати стиль CSS до елементу веб-сторінки, безпосередньо вкладеному в інший елемент:
<селектор 1>> <селектор 2> <<стиль>>
Стиль буде прив'язаний до селектору 2. який безпосередньо вкладений в селектор 1.
div> strong font-style: italic / * Курсив * /
>
.
Це звичайний текст. А це звичайний жирний текст.
Як видно на малюнку, правило стилю подіяло тільки на перший тег . який безпосередньо вкладений в тег . тому правило на нього не діє. Наступним розглянемо контекстний селектор <пробел>. Він дозволяє прив'язати CSS стиль до елементу вкладеному в інший елемент, причому може бути будь-який рівень вкладеності: <селектор 1> <селектор 2> <<стиль>> Стиль буде застосований до селектору 2. якщо він так чи інакше вкладений в селектор 1. Розглянемо попередній приклад, тільки при описі CSS правила застосуємо контекстний селектор: div strong font-style: italic / * Курсив * / Це звичайний текст. А це теж курсивний жирний текст. Звичайний текст і просто жирний текст Як бачимо, на цей раз правило подіяло на обидва тега . навіть на той, який вкладено і в контейнер . на тег . який просто вкладений в абзац правило css ніяк не діє. Навчися створювати професійні сайти на HTML5 та CSS3 Селектори атрибутів - це спеціальні селектори, які прив'язують стиль до елементу на підставі, чи присутній в ньому певний атрибут або чи має він певне значення. Існує кілька варіантів застосування таких селекторів. <селектор>[<имя атрибута тега>] <<стиль>> І прив'язує стиль до тих елементів, всередині яких були додані вказаний атрибут. наприклад: strong [title] color: red; автомобіль це механічне моторне безрейковий дорожній транспортний засіб мінімум з 4 колесами. На малюнку можна помітити, що правило css (червоний колір тексту) застосовується до елементу strong. до якого доданий атрибут title. Синтаксис цього селектора наступний: <селектор>[<имя атрибута тега>=<значение>] <<стиль>> Прив'язує стиль до елементів, теги яких мають атрибут з вказаним ім'ям і значенням. приклад: Деякі значення атрибутів можуть перераховуватися через пробіл, наприклад імена класів. Щоб задати правило стилю при наявності в списку значень атрибутів необхідного значення застосовується наступний селектор: [<имя атрибута тега> =<значение>] <<стиль>> Стиль застосовується в тому випадку, якщо у атрибута є необхідне значення або воно входить в список значень, розділених пробілами. наприклад: Вийти наступний результат: Правило застосовується до елементу, у якого серед значень атрибута class є значення tel. У значеннях ідентифікаторів і класів допускається використовувати дефіс. Для прив'язки стилю до елементів, значення атрибутів яких можуть містити дефіс можна скористатися наступною конструкцією: Стиль застосовується до тих елементів, у яких значення атрибута починається з вказаного значення після, якого йде дефіс. наприклад: [Class | = "menu"] color: red; У прикладі правило стилю застосовується тільки до тих елементів списку, у яких ім'я класу починається зі значення «menu-". Даний селектор встановлює стиль для елемента, якщо значення атрибута тега починається з певного значення. Може бути два варіанти: [<имя атрибута тега>^ =<подстрока>] <<стиль>> У першому випадку стиль застосовується до всіх елементів, теги яких мають атрибут з вказаним ім'ям і значенням, що починається з вказаною підрядка. У другому випадку теж саме, тільки до певних елементів зазначеним в основному селекторі. приклад: Прив'язує стиль до елементів, у яких значення атрибута закінчується зазначеним текстом. Повинен виглядати так: [<имя атрибута тега>$ =<подстрока>] <<стиль>> У першому випадку стиль застосовується до всіх елементів, у яких є атрибут з вказаним ім'ям і має значення закінчується зазначеної підрядком. У другому випадку теж саме, тільки до вказаних селекторам. Таким способом, наприклад, можна по різному відображати різні формати графічних зображень. наприклад: IMG [SRC $ = gif] border: 5px solid red; Картинка формату gif Картинка формату png У прикладі всі картинки з розширенням gif будуть відображатися з червоною рамкою товщиною п'ять пікселів. Цей селектор прив'язує стиль до тегам, значення атрибута яких містять певний текст. синтаксис: [<имя атрибута тега>* =<подстрока>] <<стиль>> Стиль прив'язується до елементів, у яких є атрибут з вказаним ім'ям і його значення містить зазначену подстроку. наприклад: IMG [SRC * = gallery /] border: 5px solid red; Картинка з папки gallery Картинка з іншої папки У прикладі стиль застосовується до картинок, які завантажені з папки «gallery». На цьому про селекторах атрибутів все. Всі перераховані методи можна комбінувати між собою: Крім того нагадаю про спеціальні селекторах CSS: На цьому все, до нових зустрічей.
>
.
Селектори по атрибутам тега
1. Простий селектор атрибуту
>
.
2. Селектор атрибута зі значенням
3. Одне з кількох значень атрибута
<основной селектор>[<имя атрибута тега>
4. Дефіс в значенні атрибута
font-size: 150%;
>
.
5. Значення атрибута починається з певного тексту
<основной селектор>[<имя атрибута тега>^ =<подстрока>] <<стиль>>
6. Значення атрибута закінчується певним текстом
<основной селектор>[<имя атрибута тега>$ =<подстрока>] <<стиль>>
>
.
7. Значення атрибута містить зазначену рядок
<основной селектор>[<имя атрибута тега>* =<подстрока>] <<стиль>>
>
.
»Формуються сусідні селектори;
Схожі статті