Уроки CSS

Селекторы в CSS

Селекторы – это ещё один важный элемент в CSS.

Когда вы пишите стиль для тегов <p></p> то он будет применятся глобально – ко всему, что написано между этих тегов. Но с помощью селектора можно задать условие – что только внутри блока или таблицы будет применяться стиль для какого-нибудь тега.

Например, стиль для тегов <p></p>, которые располагаются внутри блока:

<style>
div p {

color: Orange;
font-size: 16px;
}

</style>

<div style="width: 250px; height: 90px;  background: Whitesmoke">
<p>Текст в блоке с применением селектора</p>
</div>

Так же довольно часто селекторы используют вместе с классами.

Для примера сделаем таблицу (из предыдущего урока), но добавим к стилевому классу для одной из ячеек селектор для ссылки <a></a>.

То есть так: table td.myst_1 a { .. }

Это значит что к ссылке, написанной внутри ячейки с классом myst_1, будет применён некоторый стиль.

<style>
#mytable {

border: 3px solid #EBE377;
background: #D9F3EC;
width: 350px;
height: 150px;
}

table td.myst_1{
background: Green;
color: #F7F31C;
text-align: center;
}

table td.myst_1 a {

        color: #15F5F8;
        font-size: 14px;
}

table td.myst_2{
background: #D5713F;
color: #FCFCFC;
text-align: center;
}

</style>

<table  id="mytable">
<tr>
<td class="myst_1" >Жёлтый текст <a href="#"> ссылка </a></td> 
<td>Обычный текст</td>
</tr>
<tr>
<td>Обычный текст</td> 
<td class="myst_2">Ванильный фон</td>
</tr>
</table>

Жёлтый текст ссылка	Обычный текст
Обычный текст	Ванильный фон

◄ Предыдущий урок

Содержание

Следующий урок ►