Приклад нижче не спрацює:

Абзац і в ньому жирнийелемент, і ось похилийелемент.

тут жирнийі підкресленийелементи, ще похилий.

Більш реальний приклад

Давайте розглянемо роботу сусіднього селектора на більш реальному прикладі. У великих статтях, що містять кілька розділів позначених тегами

, Бажано збільшити верхню відступ (властивість margin-top). Відступ в 30px буде надавати тексту читабельності. Але ось в разі, якщо тег

йде відразу після

, А це може бути на початку статті, вержній відступ над тегом

буде зайвим. Вирішити таку задачу можна за допомогою селектора суміжного елемента.

Ось html-код з прикладом роботи селектора сусіднього елемента.

Вітання!

Тема h2

Тема h2

Текст абзацу в про неймовірні пригоди.

Тема h2

Текст абзацу в про неймовірні пригоди.

Тема h2

Текст абзацу в про неймовірні пригоди.

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

і

Також варто відзначити що для зменшення відступів зручно використовувати негативні значення.

Вітання!

Тема h2

Текст абзацу в про неймовірні пригоди.

Тема h2

Текст абзацу в про неймовірні пригоди.

Тема h2

Текст абзацу в про неймовірні пригоди.

Тема h2

Текст абзацу в про неймовірні пригоди.

Тепер приклад того, як за допомогою сусіднього селектора виділити всі елементи списку, крім першого.

• Пункт списку №1.
• Пункт списку №2.
• Пункт списку №3.
• Пункт списку №4.

Ось що вийде в результаті роботи цього прикладу:

Малюнок 1. Робота прикладу №5.

Вітаю Вас, шановні читачі. У попередніх статтях ми вивчали, в основному, атрибути стилів CSS. Їх дуже багато. Одні задають параметри шрифтів, інші параметри фону, треті параметри відступів і рамок.

У цій статті ми поговоримо про селекторах стилів. В одній з статті ми вже торкалися. А сьогодні розглянемо ще декілька видів селектор, які не відкрито прив'язують правило стилю до елементу веб-сторінки. Це так звані спеціальні селектори. Їх буває декілька видів.

Комбінатори в CSS (Сусідній, дочірній і контекстний селектори)

комбінатори- це різновид css селектор, які прив'язують правило стилю до елементу web-сторінки на підставі його місця розташування відносно інших елементів.

Перший комбінатор символ плюс(+) Або сусідній селектор. Плюс встановлюється між двома селекторами:

<селектор 1> + <селектор 2> { <стиль> }

Стиль в цьому випадку застосовується до селектору 2, Але тільки в тому випадку якщо він є сусіднім для селектора 1і йде відразу після нього. Розглянемо приклад:

strong + i (

}
...

Це звичайний текст. Це жирний текст, Звичайний текст, червоний текст

Це звичайний текст. Це жирний текст, Звичайний текст, і це звичайний текст.

результат:

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

комбінатор тильда(~) Також застосовується до сусідніх селекторам, але в цей раз між ними можуть бути інші елементи. При цьому обидва селектора повинні бути вкладені в один і той же батьківський тег:

<селектор 1> ~ <селектор 2> { <стиль> }

Стиль буде застосований до селектору 2, Який повинен слідувати за селектором 1. Розглянь приклад:

strong ~ i (
color: red; / * Червоний колір тексту * /
}
...

Це звичайний текст. Це жирний текст, Звичайний текст, червоний текстдо нього застосував право сусідніх селектор.

Це звичайний текст. Це жирний текст, Звичайний текст, а це червоний текст.

результат:

Як бачимо, в цей раз правило стилю спрацювало для обох текстів укладених в тег , Незважаючи на те, що в другому випадку між тегом і варто тег .

комбінатор > відноситься до дочірнім селекторам. Дозволяє прив'язати стиль CSS до елементу веб-сторінки, безпосередньо вкладеному в інший елемент:

<селектор 1> > <селектор 2> { <стиль> }

стильбуде прив'язаний до селектору 2, Який безпосередньо вкладений в селектор 1.

div> strong (

}
...

Це звичайний текст. Це жирний курсивний текст.

Це звичайний текст. А це звичайний жирний текст.

І результат:

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

. А безпосереднім батьком другого тега є тег

, Тому правило на нього не діє.

наступним розглянемо контекстний селектор<пробел> . Він дозволяє прив'язати CSS стиль до елементу вкладеному в інший елемент, причому може бути будь-який рівень вкладеності:

<селектор 1> <селектор 2> { <стиль> }

Стиль буде застосований до селектору 2, Якщо він так чи інакше вкладений в селектор 1.

Розглянемо попередній приклад, тільки при описі CSSправила застосуємо контекстний селектор:

div strong (
font-style: italic / * Курсив * /
}
...

Це звичайний текст. Це жирний курсивний текст.

Це звичайний текст. А це теж курсивний жирний текст.

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

результат:

Як бачимо, на цей раз правило подіяло на обидва тега , Навіть на той, який вкладено і в контейнер

і в абзац

. на тег , Який просто вкладений в абзац

правило cssніяк не діє.

Селектори по атрибутам тега

Селектори атрибутів - це спеціальні селектори, які прив'язують стиль до елементу на підставі, чи присутній в ньому певний атрибут або чи має він певне значення. Існує кілька варіантів застосування таких селекторів.

1. Простий селектор атрибуту

Має вигляд:

<селектор>[<имя атрибута тега>] { <стиль> }

І прив'язує стиль до тих елементів, всередині яких були додані вказаний атрибут. наприклад:

strong (
color: red;
}
...

автомобільце механічне моторне безрейковий дорожній транспортний засібмінімум з 4 колесами.

результат:

На малюнку можна помітити, що правило css (червоний колір тексту) застосовується до елементу strong, До якого доданий атрибут title.

2. Селектор атрибута зі значенням

Синтаксис цього селектора наступний:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

прив'язує стильдо елементів, теги яких мають атрибут з вказаним ім'ямі значенням. приклад:

a (
color: red;
font-size: 150%;
}
...
.ru "target =" _ blank "> Посилання в новому вікні

результат:

Як бачимо, обидва елементи типу гіперпосилання мають атрибут target, Але правило css, яке збільшує текст посилання в півтора рази і змінює його колір в червоний, застосовується до тегу у якого атрибут targetмає значення «_Blank».

3. Одне з кількох значень атрибута

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Стиль застосовується в тому випадку, якщо у атрибута є необхідне значення або воно входить в список значень, розділених пробілами. наприклад:

{
color: red;
font-size: 150%;
}
...

Наш телефон: 777-77-77

Наш Адреса: Москва вул. Радянська 5

Вийти наступний результат:

Правило застосовується до елементу, у якого серед значень атрибута classє значення tel.

4. Дефіс в значенні атрибута

У значеннях ідентифікаторів і класів допускається використовувати дефіс. Для прив'язки стилю до елементів, значення атрибутів яких можуть містити дефіс можна скористатися наступною конструкцією:

[Атрибут | = "значення"] (стиль)
Селектор [атрибут | = "значення"] (стиль)

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

{
color: red;
font-size: 150%;
}
...

• Пункт 1


• Пункт 2


• пункт 3


• пункт 4

результат:

У прикладі правило стилю застосовується тільки до тих елементів списку, у яких ім'я класу починається зі значення «Menu-".

5. Значення атрибута починається з певного тексту

Даний селектор встановлює стиль для елемента, якщо значення атрибута тега починається з певного значення. Може бути два варіанти:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a (
color: green;
font-weight: bold;
}
...

результат:

У прикладі показано, як по різному відображувати зовнішні посилання і внутрішні посилання. зовнішні посиланнязавжди починаються з рядка «http: //». Тому в селекторі вказуємо, що стиль застосовувати тільки до посилань, у яких атрибут hrefпочинається зі значення http: //.

6. Значення атрибута закінчується певним текстом

Прив'язує стиль до елементів, у яких значення атрибута закінчується зазначеним текстом. Повинен виглядати так:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

У першому випадку стильзастосовується до всіх елементів, у яких є атрибутіз зазначеним ім'ямі має значення закінчується зазначеної підрядком. У другому випадку теж саме, тільки до зазначених селекторам. Таким способом, наприклад, можна по різному відображати різні формати графічних зображень. наприклад:

IMG (
border: 5px solid red;
}
...

Картинка формату gif

Картинка формату png

результат:

У прикладі всі картинки з розширенням gif будуть відображатися з червоною рамкою товщиною п'ять пікселів.

7. Значення атрибута містить зазначену рядок

Цей селектор прив'язує стиль до тегам, значення атрибута яких містять певний текст. синтаксис:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

стильприв'язується до елементів, у яких є атрибутз зазначеним ім'ямі його значення містить зазначену подстроку. наприклад:

IMG (
border: 5px solid red;
}
...

Картинка з папки gallery

Картинка з іншої папки

результат:

У прикладі стиль застосовується до картинок, які завантажені з папки «Gallery».

На цьому про селекторах атрибутів все. Всі перераховані методи можна комбінувати між собою:

Селектор [атрибут1 = "значення1"] [атрібут2 = "значення2"] (стиль)

Крім того нагадаю про спеціальні селекторах CSS:

• за допомогою символів «+» і «~» формуються;
• символ «>» прив'язує css стилі до дочірнімтегами;
• символ<пробел>формує контекстні селектори.

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

На цьому все, до нових зустрічей.

Сусідні селектори CSS

Сусідні селектори CSS або як їх ще називають селектори-родичі, дозволяють застосувати стилі до елементу в тих випадках, коли він стоїть в HTML-коді перед певним елементом, Тобто елементи в даному випадку повинні знаходитися на одному рівні вкладеності. Сусідні селектори теж є складовими і складаються з простих селектор (класів, ідентифікаторів і т.д.).

Щоб ви чітко засвоїли, що таке сусідні елементи, давайте знову розглянемо знайомий приклад, тільки трохи змінений.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

У цьому прикладі є всього дві пари сусідніх елементів - це<тег2>і<тег3>, а також<тег3>і<тег5>, всі. Тобто<тег2>і<тег5>вже не є сусідами по відношенню один до одного., так як між ними стоїть<тег3> .

Сусідні селектори утворюються з двох або більше звичайних селекторів розділених між собою знаком "+" (плюс), де спочатку вказується найперший елемент в коді, потім той, який стоїть за ним, потім той, який стоїть відразу за другим і так далі. Як завжди, стилі застосовуються до того елемента, селектор якого знаходиться останнім у списку. Загальний синтаксис.

селектор1 + селектор2 ( властивість: значення; властивість: значення; ...)

Прогалини з обох сторін знака "+" можна ставити, а можна і ні, за бажанням.

Приклад використання сусідніх селектор в CSS

Заголовок

Текст. Strong.Текст. Em.

Текст. Em.Текст. Strong.

Текст. Em.Текст. Strong.

Результат в браузері

Заголовок

Текст. Strong. Текст. Em.

Текст. Em. Текст. Strong.

Текст. Em. Текст. Strong.

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

Браузер Internet Explorer 6.0 не розуміє сусідні селектори (як і дочірні). Пам'ятайте про це.

Домашнє завдання.

1. Створіть на сторінці звичайний двоколонковому макетз меню. Нехай у елементів списку меню будуть Макера-зображення.
2. Зробіть так, щоб, якщо після тега заголовка

У минулих подглави ми вивчали родинні стосунки між тегами HTML-документа, в тому числі розглядали селектори дочірніх елементів. Тепер прийшов час познайомитися з селекторами родинних елементів і селекторами сусідніх елементів.

сусідні селектори

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

приклад: допустимо, вам необхідно, щоб кожен абзац

Який йде першим після заголовка

, Мав похилий шрифт. Це можна реалізувати за допомогою такого коду CSS:

H1 + p (font-style: italic;)

Записуючи це правило, в першу чергу необхідно вказати ім'я першого сусіда, потім додати символ + та ім'я другого сусіда (того, до якого ми бажаємо застосувати стиль). Можна створювати і довші комбінації. Схема написання селектора така: selector1 + selector2 + ... + selectorN () (стиль застосовується до selectorN).

Приклади написання:

/ * Відступ від абзацу до картинки 30px * / p + img (padding-top: 30px;) / * Зелений колір для абзацу, який слід після h3 в зв'язці з h2 * / h2 + h3 + p (color: green;)

Споріднені селектори

Споріднені селектори (інші назви: сестринські, сіблінгового) дозволяють вибирати елементи HTML-сторінки, які є спорідненими по відношенню один до одного (тобто мають загального батька і знаходяться на одному рівні). Сестринські селектори схожі на сусідні, але відрізняються тим, що стиль застосовується до всіх елементів вибраного типу, а не тільки до першого з них. Замість знака + використовується символ тильда ~.

приклад: трохи змінимо попередню задачу і уявімо, що вам потрібно зробити похилий шрифт для всіх абзаців

Які йдуть після заголовка

. Код CSS буде виглядати так:

H1 ~ p (font-style: italic;)

... і трохи HTML для прикладу:

Тема 1

Тема 2

Погляньте на HTML-код: стиль застосується до всіх тегам

які слідують післятега

і знаходяться дозакриває тега батька

. У нашому варіанті налічується 3 елементи

До яких застосується стиль. Зверніть увагу, що тег

цього ніяк не завадить. Зауважте також, що в даному випадку стиль не будезастосований до того тегу

Який знаходиться над

, А також до тегу

Тому, Хто другого з батьків

.

висновки

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

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