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