В руководстве для начинающих по CSS мы рассмотрели исключительно HTML—селекторы ─ те, которые представляют тег HTML.
Вы также можете определить свои собственные селекторы в виде селекторов класса и идентификатора.
Преимущество этого заключается в том, что вы можете использовать один и тот же HTML-элемент, но представлять его по-разному в зависимости от его класса или идентификатора.
В CSS селектор классов — это имя, перед которым стоит точка (“.”), а селектор идентификаторов — это имя, перед которым стоит символ хэша (“#”).
Таким образом, CSS может выглядеть примерно так:
#top {
background-color: #ccc;
padding: 20px
}
.intro {
color: red;
font-weight: bold;
}
HTML ссылается на CSS с помощью атрибутов id и class. Это может выглядеть примерно так:
<div id="top"> <h1>Шоколадное пирожное</h1> <p class="intro">Мой рецепт приготовления пирожного с шоколадом</p> <p class="intro">Ммм ммм мммммммм</p> </div>
Разница между идентификатором и классом заключается в том, что идентификатор может использоваться для идентификации одного элемента, тогда как класс может использоваться для идентификации нескольких элементов.
Вы также можете применить селектор к определённому HTML-элементу, просто указав сначала HTML-селектор, поэтому
p.jam { /* whatever */ }будет применён только к элементам paragraph, имеющим класс “jam”.
Страницы в тему:
- Следующая страница: Группировка и вложенность
- Предыдущая страница: Продвинутый урок CSS
- Селекторы, свойства и значения (Урок CSS для начинающих)
- Селекторы CSS
