В HTML можно вписать одни теги в другие. В CSS мы можем выбирать те теги, которые вложены в какой-либо тег. Для этого используется конструкция вложенных селекторов (A B). Например, мы можем задать стили для всех em, которые находятся в тегах div.

Важно: мы можем проделывать подобное для множества тегов, к примеру div em b {стили здесь};. Также это работает не только с тегами, но и с классами или же с идентификаторами.

#example em {
	color: #cc4d4d;
}

<div id="example">Lorem ipsum <em>dolor</em> sit amet, consectetur adipisicing <em>elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<em>А вот здесь стилей нет!</em>

Результат:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
А вот здесь стилей нет!

Этот селектор выберет лишь те элементы, у которых какой-либо атрибут будет равен заданному значению. К примеру, выбрать все input, у которых есть атрибут type="text".

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

Также можно выбирать элементы по атрибуту, без учета их значения. Например:

div[data-title] {};

В этом случае будет применяться стиль ко всем тегам div, у которых есть атрибут data-title. При этом не важно какое его значение.

a[target="_blank"]::after { 
	content: ' ->';
	color: #ccc051;
}

<a href="#" target="_blank">Target Black</a>
<br>
<a href="#">Обычная ссылка</a>

Результат: 

Target Black ->
Обычная ссылка

Одним из способов нахождения нужных вам объектов может послужить селектор выбора элементов по тегу. Для этого необходимо просто прописать название нужного вам тега и добавить к нему стили.

Важно: стили будут применены ко всем тегам указаного типа.

span {
   color: #FFA13E;
}

<span>Простой текст</span>
<br>
<span>Еще немного текста</span>

Результат: 
Простой текст
Еще немного текста

Дочерние селекторы позволяют выбрать лишь те теги, которые находятся внутри родительского элемента. К примеру, у нас есть код:

<p id="example">
	Lorem ipsum dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut</i> enim ad minim veniam, <i>quis</i> nostrud exercitation ullamco laboris nisi ut aliquip <i>ex ea</i> commodo consequat.
	<div>
		Lorem <i>ipsum</i> dolor sit amet.
	</div>
</p>

Значит, чтобы выбрать все дочерние теги i нам необходимо использовать p > i. Таким образом будут выбраны лишь прямые наследники. Те теги, которые находятся в других элементах не будут использовать стили.

Важно: если бы мы хотели выбрать абсолютно все теги i в теге p, то мы бы использовали конструкцию вложенных селекторов (p i).

#example>i { 
	color: #ccc051;
}

<p id="example">
	Lorem ipsum dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut</i> enim ad minim veniam, <i>quis</i> nostrud exercitation ullamco laboris nisi ut aliquip <i>ex ea</i> commodo consequat.
	<div>
		Lorem <i>ipsum</i> dolor sit amet.
	</div>
</p>

Результат:

	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	

		Lorem ipsum dolor sit amet.
	

В CSS вы можете выбирать элементы при помощи идентификатора (id). При использовании такой выборки необходимо прописать имя идентификатора и указать к нему стили. Имя идентификатора может быть любым и вы сами можете придумать его.

Важно: на сайте не может повторяться идентификатор дважды с одним и тем же именем.

#simple-block {
   background: #FFA13E;
}

Здесь находиться простейший текст.

Результат:
Здесь находиться простейший текст.

В CSS вы можете выбирать элементы при помощи классов (class). При использовании такой выборки необходимо прописать имя класса и указать к нему стили. Имя класса может быть любым и вы сами можете придумать его.

Важно: в отличии от идентификатора, который с одинаковым именем может быть лишь один на странице, классы можно использовать множество раз с одним и тем же именем.

.simple-block {
   background: #FFA13E;
}

<div class="simple-block">Здесь находиться простейший текст</div>
<br>
<div class="simple-block">Вы можете подумать, что текст в этом блоке ни о чем, так знайте - вы правы! </div>

Результат:
Здесь находиться простейший текст.
Вы можете подумать, что текст в этом блоке ни о чем, так знайте - вы правы! :)

В HTML к тегу можно добавить несколько классов через пробел. В CSS вы можете выбирать такие элементы при помощи мультиклассов (.class.class). Вы можете по отдельности добавить стиль к каждому классу и для объектов, где будет оба класса использовать иной стиль.

Важно: вы можете не только два или же один класс к объекту, но и намного больше. Просто через пробел записывайте новые классы для какого-либо HTML тега.

.paddBox {
   padding: 1%;
   width: 98%;
}

.paddBox.light {
   background: #91cfd4;
}

.paddBox.green {
   background: #91d4a2;
}

<div class="paddBox light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="paddBox green">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="paddBox">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>

Результат:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

b + i { 
   color: #ccc051;
}

<p>
	Lorem <b>ipsum dolor</b> sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut</i> enim <b>ad</b> minim veniam, <i>quis</i> nostrud <b>exercitation</b> ullamco <i>laboris</i> nisi ut aliquip <i>ex ea</i> commodo consequat.
</p>

Результат:

	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

В CSS существует универсальный селектор (*), который применяет стили ко всем элементам на сайте. Здесь вы можете задать некие общие стили, к примеру размер шрифта или же сам шрифт.

Стоит знать: зачастую его применяют для удаления стандартных отступов в браузере.

* {
   padding: 0;
   margin: 0;
}