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

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

Ось, наприклад, CSS-селектори. Якщо ви знаєте, що їх використовують для стилізації елементів веб-сторінок, але не цілком розумієте, як саме вони працюють, вважаю, сьогодні у вас є шанс це виправити. Для того, щоб розібратися з тим, як працюють CSS-селектори, вирушимо в автосалон.

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

Автомобілі, а також їх характеристики, можна класифікувати, використовуючи ту ж систему, яка лежить в основі CSS селекторів. І якщо вам зрозуміло, що автомобілі на малюнку нижче можна розділити на седани, кабріолети і легкі вантажівки, це означає, що ви зможете зрозуміти і те, як влаштовані CSS-селектори.



Для початку опишемо автомобілі, виставлені на продаж, з допомогою HTML-коду:

<section>
<div class='sedan blue 2015 leatherSeats'></div>
<div class='sedan red 2012 hatchback'></div>
/** 10 more */
</section>
<section>
<div id="123xyz" class='convertible purple audi v8'></div>
<div class='convertible green mustang dualExhaust'></div>
/** 10 more */
</section>
<section>
<div id="789abc" class='truck 2014 seatWarmer crewCab'></div>
<div class='truck 2013 powerSteering'></div>
/** 10 more */
</section>

Ми збираємося розглянути чотири базових способу стилізації HTML-елементів за допомогою CSS. А саме:

  1. За типом елемента. У нашому випадку мова йде про теге <div>, що містить відомості про автомобілі.
  2. По класу (class). Наприклад, це клас blue, призначений першого автомобілю в коді.
  3. За ідентифікатором (id). Приклад ідентифікатора з коду – 123xyz.
  4. з відносин з іншими елементами
Розглянемо ці варіанти детальніше.

Типи елементів
У вищенаведеному прикладі HTML-коду кожен тег <div> символізує окремий автомобіль. Припустимо, нам потрібно, з використанням CSS, призначити якісь властивості усім цим автомобілям. Що у них спільного у седанів (sedan), кабріолетів (convertible) або легких вантажівок (truck)? Насправді, список може бути дуже довгим, але ми обмежимося трьома властивостями. У кожного з наших автомобілів по чотири колеса, максимальна висота автомобіля не перевищує 270 сантиметрів, а кузов кожного зроблений із сталі. Запишемо ці міркування в наступному вигляді:

div{
wheels: 4;
max-height: 270;
material: steel;
}

З цього простого прикладу ми і почнемо. Як бачите, тут задіяні деякі CSS-властивості, які будуть за замовчуванням застосовуватися до тегам <div>. Як до тих, які вже в коді є, так і до тих, які ми можемо до нього додати пізніше. Зверне увагу на те, що цей код доречно буде назвати «псевдо-CSS», так як при стилізації, скажімо, тих же тегів <div> на реальній веб-сторінці, у справу підуть зовсім інші властивості.

Насправді, ми можемо розвивати цю ідею далі. Опишемо за допомогою HTML особливості внутрішнього оформлення салонів автомобілів. Ось, наприклад, як можна описати седан:

<div class='sedan'>
<div class='frontRow'>
<div class='window'></div>
<div class='seat'></div>
<div class='seat'></div>
<div class='window'></div>
</div>
<div class='backRow'>
<div class='window'></div>
<div class='seat'></div>
<div class='seat'></div>
<div class='seat'></div>
<div class='window'></div>
</div>
</div>

Седани мають два ряди сидінь. Передній ряд (frontRow) містить два крісла, задній (backRow) – три. Крайні крісла в лавах перебувають біля вікон. Є у сидінь автомобілів які-небудь загальні властивості? З'ясуємо це трохи пізніше.

Класи
Погляньте на перший фрагмент HTML-коду, який містить опис всіх автомобілів, виставлених на продаж. Зверніть увагу на те, що кожному тегу <div>, що символізує автомобіль, призначений набір класів. Ці класи використовуються для надання загальних властивостей всіх членів класу.

Скажімо, ми призначаємо клас year2005 різним седанам, вантажівкам і кабріолетів, що вийшов з конвеєра в 2005-му році. Що спільного може бути у таких автомобілів? Наприклад – автомагнітола з CD-плеєром! Відобразимо це в CSS-код, що задає стиль класу.

.year2005{
muiscPlayer: cd;
}

А що якщо у нас є клас crewCab, що символізує наявність автомобіля, зокрема, у вантажівки, подвійної кабіни? У вантажівок з такою кабіною мається два ряди сидінь, на яких, в цілому, виявляється п'ять крісел. Цей клас можна використовувати спеціально для вантажівок. Класи комбінують, записуючи їх один за одним через точку:

.truck.crewCab{
seats: 5;
}

Класи – це більш конкретний, ніж тип елемента, спосіб посилатися на елементи HTML. Наприклад, основний матеріал кузовів всіх автомобілів за замовчуванням – сталь. Але потрібно відобразити те, що деякі авто мають алюмінієвий кузов. Для цього можна створити клас aluminium, який, будучи застосований до тегу <div>, перевизначити властивість material у всіх членів класу. Згадаймо: вище ми встановили властивість material для всіх елементів <div> значення steel.

div{
material: steel;
}

Тепер, застосувавши клас aluminium до деяких з елементів <div>, ми змінимо steel aluminium.

.aluminum{
material: aluminum;
}

Таким чином, якщо одне і те ж властивість має різне значення в стилі елементу і в стилі класу, які застосовуються одного і того ж елементу, цей елемент отримає властивість, задане для класу.

Ідентифікатори
HTML-елементів можна призначати ідентифікатори, які повинні бути унікальними для кожного елемента. Це – найбільш точний спосіб звернення до окремого елементу. Стиль, призначений ідентифікатором, перекриває всі інші стилі. Ідентифікатор елемента дуже схожий на номерний знак автомобіля.



Скажімо, у нас є автомобіль з номером 123 XYZ. Попередній власник захотів, щоб цей автомобіль пофарбували в неповторний відтінок фіолетового кольору. Ось опис цього факту в CSS:

#123xyz{
color: weirdpurple;
}

Елемент і його ідентифікатор співвідносяться як «один-до-одного». Це дуже нагадує реальні автомобілі та їхні номерні знаки. У двох машин не може бути однакових номерів. Ідентифікатор, крім того, самий потужний спосіб адресації елемент, завдяки якому можна створювати виключення з правил, яким повинні підкорятися всі елементи.

Взаємовідносини між елементами
Припустимо, нам потрібно, щоб автомобілі, яким призначено клас leatherSeats мали шкіряні сидіння. Погляньте на другий фрагмент HTML-коду з розділу «Типи елементів», в якому ми описували оформлення салонів автомобілів.


Для того, щоб досягти бажаного ефекту, можна, для автомобілів з шкіряними сидіннями, призначити кожному тегу <div> з класом seat і клас leather. Але ось в чому справа: такий підхід дозволить нам звертатися лише до сидінь, впливати з допомогою CSS тільки на «шкіряні сидіння», а не на «автомобілі з шкіряними сидіннями». Адже в теге <div>, відповідному всьому автомобілю, згадок про сидіннях немає.

Теги з класом seat розташовані всередині тегів з класами sedan, convertible або truck. Це означає, що «сидіння» в нашому прикладі є нащадками «автомобілів». Тому, для того, щоб у нас була можливість звертатися і до автомобілю з шкіряними сидіннями», і до самих «сидінням», призначимо клас leatherSeats автомобілям з шкіряними сидіннями, а для звернення до сидіннями використовуємо таку конструкцію:

.leatherSeats .seat{
material: leather;
}

Зверніть увагу на те, що імена класів розділені пропуском. Це – так званий селектор нащадків. В результаті, CSS-код з прикладу дозволяє стилізувати всі елементи з класом seat, які знаходяться в контейнері, якому призначений клас leatherSeats.

Тепер припустимо, що нам потрібно вказати, що передні сидіння деяких автомобілів обладнані обігрівом. У такій ситуації можна використовувати селектор ~, який відомий як селектор родичів. Такий підхід дозволяє призначати стилі елементів щодо їхніх сусідів.

Наприклад, це може виглядати так:

.driverSeat ~ .seat{
seatWarmers: true;
}

І ось ще приклад. Скажімо, якась модель автомобіля відрізняється вельми незвичайними властивостями. Наприклад, легкий вантажівка Chevrolet 2008-го року оснащений DVD-плеєрами, вбудовані в задні сидіння. Ось які міркування допоможуть виразити це у вигляді CSS:

  1. Почати потрібно з декількох класів, так як мова йде про вельми специфічному типі автомобіля. Наприклад, це може бути div.truck.chevy.year2008.

  2. Потім варто подумати про те, як можна звернутися до заднім сидінням. Заднього ряду сидінь можна призначити додатковий клас. Скажімо, щось на зразок .backRow. Або можна скористатися селектором last-child, що дозволяє вибрати останнього нащадка, враховуючи те, що в описі салону автомобіля спочатку йдуть передні сидіння, потім – задні.

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

div.chevy.truck.year2008 .backRow .seat{
media: dvdPlayer;
}

Підсумки
Якщо ви погано уявляли собі особливості роботи з CSS, сподіваюся, цей приклад допоміг вам зрозуміти те, що раніше було незрозуміло. Його головне призначення полягає в тому, щоб, перейшовши від абстрактних понять HTML і CSS, до цілком відчутним, конкретних автомобілів, допомогти вам уявити, як CSS-стилі впливають на HTML-документи. І, якщо вам вдалося укласти в голові те, про що ми говорили, відкривайте редактор, та хоча б той же codepen.io, беріть довідники HTML і CSS, і приступайте до власних експериментів з кодом, які дозволять закріпити на практиці все те, що ви дізналися і зрозуміли.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.