Селекторы классов, идентификаторов

Ранее мы уже рассматривали 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".