Селекторы CSS для начинающих. Часть 1.

CSS

Окей, скажут некоторые мои подписчики и отпишутся от обновлений. Конечно, я понимаю, что во-первых статья для совсем начинающих, во-вторых, довольно много информации есть по этой теме… но тем не менее у многих людей, которые ко мне обращаются, возникают с этим проблемы. А я даже и не знаю, на какую статью им ссылку дать, смотрю одно руководство, смотрю второе, и что-то ни одно из них мне не нравится.

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even). Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.

Пример 1. Селекторы по ID элемента

Ну это на мой взгляд самое простое и с этого нужно начинать, тут самое важное, что нужно помнить — это что какой-либо конкретный ID может встречаться только один раз на странице, ну и конечно же для вашего удобства будет лучше, если на других страницах сайта этот же ID не будет обозначать абсолютно другой элемент.

<em id="misha_em">Текст курсивом.</em>
<strong id="misha_strong">Жирный текст.</strong>

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */
#misha_em{
	color:#888; /* серый цвет для курсива */
}
#misha_strong{
	color:#fe0000; /* красный для жирного текста */
}

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{
	text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */
}

Подытожу: как видите с ID всё предельно просто — добавляем соответствующий атрибут к любому HTML-элементу, этот атрибут должен быть уникальным и не повторяться больше на странице, а затем мы просто обращаемся к нему напрямую через CSS. Всё.

Пример 2. Селекторы по классам

Первое отличие классов от ID — это то, что их может быть на странице сколько угодно. Например для того, чтобы не перечислять все ID элементов через запятую, как в предыдущем примере, используем классы.

<em id="misha_em" class="misha_text">Текст курсивом.</em>
<strong id="misha_strong" class="misha_text">Жирный текст.</strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */
.misha_text{
	text-tansform: uppercase; /* оба элемента <em> и <strong> будут переведены в верхний регистр */
}

Также мы можем обратиться ко всем элементам жирного текста <strong> с классом .misha_text, добавив перед точкой название тега элемента:

/* обращаемся ко всем <strong> класса misha_text */
strong.misha_text{
	color:#fe0000;
}

Очень кратко про приоритеты

Обычно если одному и тому же элементу присваиваются разные стили несколько раз, то задействуются те, которые указаны в CSS-файле в последнюю очередь (на самом деле тут полно правил, это однозначно тема отдельного поста). Однако у разных селекторов различный приоритет, и в примере я покажу, что имею ввиду.

Тут может показаться, что элементу должен быть присвоен цвет #fe0000, так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{
	color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */
}
#misha_strong {
	color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */
}
.misha_text{
	color:#fe0000;
}

Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

Я предположу, что вы уже знаете парочку HTML-тегов, например то, что <div> — это просто блок, <ul> и <li> — элементы списка, <strong> — жирный текст, <p> — абзац.

<div>
	<ul>
		<li>Элемент списка 1</li>
		<li>Элемент списка 2</li>
		<li><strong>Жирный</strong> элемент списка 3</li>
	</ul>
</div>
<p><strong>Жирный текст внутри абзаца</strong></p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{
	background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */
}
li{
	color:green; /* текст элементов списка станет зелёного о_О цвета */
}
strong{
	background-color:#ff0000; /* фон всех элементов strong станет красного цвета */
}

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого <body>! Чтобы понять, о чем я говорю, смотрите пример:

/* это означает, что стили будут применяться ко всему жирному тексту, 
который находится внутри элемента <ul>, который в свою очередь находится внутри элемента <li>,
который в свою очередь находится внутри элемента <div>, и необязательно, чтобы эти элементы
шли друг за другом последовательно!!! то есть может быть и так: div p ol li ul li p strong */
div ul li strong{
	background-color:#ff0000;
}
/* ситуация точно такая же, необязательно элемент <strong> должен сразу идти после элемента <p>,
это может быть и: p span strong */
p strong{
	background-color:#aaa;
}

В принципе всё правильно и вы можете так и оставить и перейти к следующей главе, но я пока что попробую этот пример упростить.

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong{
	background-color:#ff0000;
}
p strong{
	background-color:#aaa;
}

Ну а теперь важное правило, если приоритет впереди стоящего селектора не выше, чем последующего, то к элементам применяются правила последующих селекторов.

/* сначала для всех <strong> делаем красный фон */
strong{
	background-color:#ff0000;
}
/* а потом перезаписываем правила для тех <strong>, которые находятся внутри абзацов <p> */
p strong{
	background-color:#aaa;
}

Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал