Css селектори опис і розбір найосновніших з них

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

Селектори в CSS

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

Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:

Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
HostIQ - хостинг преміум якості.
Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!

В даному випадку селектором виступає p - тег абзаців. Таке правило додасть стилі для всіх абзаців на веб-сторінці.

Якими бувають css селектори?

Селектор тега - найпростіший. Він був продемонстрований в прикладі. Щоб записати його в css, потрібно написати ім'я тега без кутових дужок. Стилі будуть застосовані до всіх елементів з таким тегом.
Table<> - стилі для всіх таблиць
Li<> - стилі для всіх пунктів списку
A<> - стилі для всіх посилань

Стильовий клас - до будь-якого елементу на веб-сторінці можна прив'язати стильовий клас. Навіть до одній букві. Потім в css-файлі можна звернутися до цього елементу, прописавши для нього власні стилі. Для цього потрібно поставити крапку і написати ім'я стильового класу після неї. приклади:
.about<> - правила застосуються до всіх елементів, які мають атрибут class = "about"
.down<> - правила застосуються до всіх елементів, які мають атрибут class = "down"
.float<> - правила застосуються до всіх елементів, які мають атрибут class = "float"

Як бачите, головне поставити крапку. Стильовий клас можна прив'язувати до необмеженої кількості елементів. Елементу можна прописати декілька класів.

Ідентифікатор - ще один вид селекторів. Один ідентифікатор можна задати тільки одному елементу. Він не може мати двох ідентифікаторів, а також id прив'язаний до цього елементу, не може бути прописаний ніде більше.

Здається він так:

Тобто так само, як і клас, тільки використовується атрибут id в якості значення якого використовується будь-яке слово.

Щоб звернутися до елементу з ідентифікатором через css потрібно написати значення id і перед ним поставити решітку.

#first Font-size: 22px
>

Ми звернулися до абзацу з id = first. Стиль застосується тільки до нього. У решти абзаців розмір шрифту не зміниться.

Псевдокласи

Про псевдоклас я написав окрему статтю. тому не бачу сенсу повторюватися.

об'єднання селектор

Ще одне важливе правило, про який потрібно знати. Селектори стильових класів можна записати, але не відділить їх один від одного. наприклад:
.class1.class2 - вибере ті елементи, у яких є обидва ці класу.
.class1.class3.class8 - вибере елементи, до яких прив'язані всі три стильових класу.

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

Якщо відокремлювати селектори один від одного пробілами, то можна відтягнутися до потрібного нам елементу. приклади:
Table td - вибере все осередки, що лежать в таблицях
Ul li a - вибере всі посилання, що лежать в пунктах списків (а пункти списків в свою чергу лежать в самих списках)
.class1 p - вибере все абзаци з атрибутом class = "class1"
.class2 p span - вибере весь вміст тегів. лежить в абзацах з класом class2.

Вкладати і комбінувати таким чином можна скільки завгодно раз. приклади:
#header .logo span: first-letter<> - вибере першу букву в спання логотипу, який розташований в шапці
.class1.class2: hover<> - визначить стиль при наведенні мишки для елементів, які мають обидва стильових класу.

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

Якщо вам потрібно задати стилі для елементів батька, які є БЕЗПОСЕРЕДНЬО дочірніми. то потрібно прописати це так:
Ul> li<> - вибере пункти списку, які вкладені в нього безпосередньо, а не лежать в інших тегах
P> a<> - вибере тільки ті посилання в абзацах, які лежать безпосередньо в них, а не вкладені в інші теги (які, в свою чергу, вже вкладені в абзаци)
приклад:

Якщо прописати такий селектор P> a. то застосуються чи стилі до заслання в наведеному вище прикладі? Ні, тому що вона ще вкладена в інший тег, тобто не є безпосередньо дочірньою.

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

Останнє, що ми сьогодні розглянемо. Якщо прописати в css так:
.class1 + .class4 <>. то цей селектор вибере елемент з атрибутом class = "class4". і цей елемент повинен стояти в HTML-коді відразу ж за елементом з класом class1. Тільки в цьому випадку все буде працювати. Знову ж розглянемо на прикладі:

Чи спрацює вищевказаний селектор (.class1 + .class4 <> )? Ні, тому що елементи не стоять поруч. Між ними знаходиться тег img. Ось якщо його видалити, тоді все запрацює.

Отже, ми з вами розглянули основні і найбільш прості селектори. Напевно цих знань вам вистачить, щоб вирішити 95% проблем. У наступній статті я опишу деякі більш специфічні css селектори.

Пріоритет css селектор

Щоб визначити, які стилі є більш пріоритетними, користуйтеся простими правилами:
Ідентифікатор є пріоритетним селектором. Якщо у елемента є стильовий клас і id. і в обох призначені однакові властивості з різними значеннями, то буде виконано ті стилі, які записані для ідентифікатор.

Клас є більш пріоритетним селектором, ніж селектор тега (p, table, ul). Псевдоклас має таку ж вагу, що і простий клас. p: first-line приоритетнее, ніж .firstline. тому що в другому селекторі просто клас, а в першому - селектор тега + псевдоклас.

Ще одна корисна правило - чим конкретніше селектор, тим більше пріоритетними є стилі для нього. Наприклад, між body і p битву виграє абзац, оскільки це більш конкретний селектор, ніж body (бо це вся сторінка, тобто не дуже конкретно). Table p. в свою чергу, конкретніше, ніж просто p. Загалом, просто знайте про такі правила.