HTML & CSS для початківців (Частина 26): Як отримати доступ до елементів за допомогою селекторів (1)

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

Селектор {
   Властивість1: Значення;
   Властивість2: Значення;
   Властивість3: Значення;
}

Відповідне означення ви вже зустріли в попередньому практичному посібнику.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Обов'язково дотримуйтеся того, щоб завершувати кожне оголошення крапкою з комою.

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

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

Найпростіший спосіб призначити стилі всередині HTML-документу - це селектор елемента.

Шляхом використання такого синтаксису усім елементам p назначається чорний колір.

p { 
   color: #009966; 
}

Якщо ви хочете призначити один стиль декільком елементам, це також можливо.

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

p, h1,  li { 
   color: #000; 
}

Ви також можете призначити кілька стилів елементам. Зазначені стилі записуються через крапку з комою.

p { 
   color: #000; 
   background-color: red;
}

Також можлива комбінація наведених варіантів.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Результат може виглядати так:

Ділянки з декількома елементами

Часто виникає потреба оформити область, яка складається з кількох HTML-елементів. Для таких випадків у HTML є два спеціальних елементи: span та div. Ці елементи ви будете зустрічати в цьому циклі - до речі, стосовно цієї серії.

Приклад:

<div class="artikel">
  <h1>Вибух кольорів</h1>
  <p class="thema">Посібник з розробки вибуху кольорів від <span class="autor">MarkusMelzer</span>.</p>
</div>

Єдиний відмінок між div та span полягає в тому, що елемент div примусово створює новий рядок у текстовому потоці. span, натомість, не створює новий рядок. У показаному прикладі визначається область div, в якій міститься заголовок і абзац. Знову ж таки усередині абзацу є span область.

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

До цього моменту використовувалися селектори елементів. У наступному прикладі за допомогою такого селектора форматуються всі заголовки h1.

h1 { 
   color: #000; 
   background-color: red;
}

Але такий підхід далеко не завжди є бажаним. Що, наприклад, якщо ви хочете призначити певні властивості лише одному чи кільком, але не всім заголовкам h1? Для таких випадків CSS пропонує два варіанти - класові та ідентифікаційні селектори.

За допомогою класових селекторів можна цілком цільово вибрати HTML-елементи з атрибутами класів. У відповідному HTML-елементі для цього потрібно вказати атрибут class. Визначення класу починається з крапки.

Приклад:

.red { 
   color: red; 
}

Тут був визначений клас red. Щоб додати червоний призначені стилі HTML-елементу, слід вказати class, за яким слідує назва класу.

<p class="red">PSD-Tutorials.de</p>

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

#topnavi { 
   color: blue; 
};

У цьому прикладі визначено ідентифікатор topnavi. Але увага: Ідентифікатор насправді можна призначити лише один раз всередині документа. Доступ до визначеної властивості ідентифікатора виглядає наступним чином:

<div id="topnavi">Тут розміщена навігація</div>

До атрибуту id призначається ім'я ID. Зверніть увагу, що тут не потрібно записувати символ решітки.





Показані відомості можна також поєднувати між собою. Так, наприклад, можна призначити декілька класів одному HTML-елементові.

<p class="rot gross">PSD-Tutorials.de</p>

В цьому прикладі текстовому абзацу призначаються два класи rot і gross. Якщо ви хочете вказати клас та id, виглядатиме це наступним чином:

<p class="rot" id="navi">PSD-Tutorials.de</p>

Також можна поєднувати елементи та id. Ось приклад:

div.navi { 
   color: blue; 
}

Ця синтаксична конструкція стосується виключно елементів div із класом navi. Елементи p, які також мають клас navi, залишаються незмінними.

У CSS існує ще один спосіб поєднання селекторів. Подивіться наступну синтаксичну конструкцію:

h1 { 
   color: red;
}
em { 
   color: blue; 
}

Тут всім заголовкам першого рівня призначається червоний колір. em-елементи отримують синій колір.

Поєднуючи обидві інструкції, можна зробити так, що лише em-елементи будуть синіми, які знаходяться всередині елементів h1.

h1 em { 
   color: blue; 
};

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

Це, до речі, популярна помилка, у яку також потрапляють початківці CSS. Ось та сама синтаксична конструкція, в якій проте поставлена кома:

h1, em { 
   color: blue; 
}

Що означає ця синтаксична конструкція? Всі h1-і всі em-елементи вказуються. Це зовсім інше, ніж синтаксис без коми!

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

* { 
   color: red; 
}

Ця синтаксична конструкція зробить всі елементи червоними. І з цим селектором слід враховувати деякі особливості синтаксису.

#mainnavi * { 
   color: red; 
}

У цьому прикладі передній фон всіх елементів всередині елемента з ID mainnavi буде синім. Проте це не стосується самого елемента.

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

* p { 
   color: red; 
}

Ця синтаксична конструкція еквівалентна наступній:

p { 
   color: red; 
}

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