Селекторы CSS — как адресовать свойства в каскадных таблицах стилей

Селекторы css

В предыдущей статье мы с Вами познакомились с основами использования каскадных таблиц стилей CSS. Теперь переходим к более детальному рассмотрению css-форматирования.

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

У начинающих веб-мастеров часто бывает такое, что прописываешь какое-нибудь свойство в таблицах CSS, а оно применяется совсем не там, где нужно.

Это происходит из-за неправильной адресации данного свойства. Сегодня мы научимся устранять эту проблему — научимся правильно адресовать css-стили.

Итак, поехали!

Что такое селекторы CSS.

Селектор CSS — это элемент (элементы) страницы нашего сайта, к которому будут применяться свойства, описанные в конкретной конструкции каскадной таблицы стилей.

Они могут быть простыми и сложными. Поскольку структурная иерархическая схема HTML-кода страницы может быть довольно сложной, то часто нам нужно будет применять разные стили к одинаковым элементам в зависимости от того, в какой части страницы они находятся.

Давайте рассмотрим виды селекторов.

Простые селекторы.

В первую очередь хочу рассказать Вам про универсальный селектор. Он обозначается символом * (звездочка) и служит для задания свойств всем элементам страницы.

* {
    margin: 0;}

Такая конструкция присваивает значение 0 внешним отступам margin для всех элементов страницы.

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

Продолжим...

Для задания CSS-стилей ко всем одинаковым элементам страницы используются селекторы элементов (или селекторы тегов).

Например:

p {
    color: red;}

Такая конструкция задает красный цвет для всех элементов <p>, которые содержатся на нашей HTML странице. При этом не важно на каком уровне вложенности находятся данные элементы в структуре документа. Например:

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
    </head>
    <body>
        <p>Этот текст содержится просто в теле документа</p>
        <div class="text">
            <h2 id="zagolovok">Заголовок</h2>
            <p>Этот текст содержится внутри контейнера div</p>
        </div>
    </body>
</html>

Оба фрагмента текста, содержащиеся внутри тегов <p>, будут написаны красным цветом.

Следующий вид простого селектора — это селектор класса. Он имеет вид:

.text {
     background-color: blue;}

В этом примере устанавливается синий цвет фона для контейнера <div> с атрибутом класса class="text" из прошлого примера.

Важно! При адресации к селектору класса, в начале обязательно ставится точка, а после точки — название класса.

Селектор идентификатора.

Селектор идентификатора — это практически тоже самое, что и селектор класса. Он устанавливает свойства для элементов, имеющих атрибут идентификатора id="название идентификатора".

Единственное отличие между ними — это то, что элементов с одинаковым атрибутом класса может быть на странице сколько угодно, а одинаковых идентификаторов на странице быть не должно.

Синтаксис селектора идентификатора такой же, как и селектора класса, только вместо точки используется # (знак решетки):

#zagolovok {
     text-transform: uppercase;}

Данная конструкция трансформирует текст из предыдущего примера, содержащийся внутри тега <h2> с атрибутом идентификатора id="zagolovok" и выводит этот текст заглавными буквами.

Сложные селекторы.

Селектор атрибута.

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

Возьмем другой пример HTML кода:

1
2
3
4
5
6
7
8
<html>
     <head>
     </head>
     <body>
         <a href="http://www.sitename.ru">Ссылка на www.sitename.ru</a>
         <a href="http://yandex.ru">Ссылка на Яндекс</a>
     </body>
</html>

И применим для этого кода css-стиль:

a[href="http://yandex.ru"]{
    font-weight: bold;}

Эта конструкция установит жирное начертание текста ссылки (тег <a>) на Яндекс. При этом другая ссылка, содержащаяся на странице, останется с обычным начертанием текста.

Обращаем внимание на синтаксис написания селектора. Атрибут берется в [квадратные скобки].

Следующий вид селекторов — селекторы потомков.

Еще их называют контекстными селекторами. Они определяют свойства для элементов, которые являются потомками других элементов в иерархической схеме документа.

Кстати, для того, чтобы было легче отследить структуру HTML документа и сразу же увидеть, какие стили применяются для какого элемента, рекомендую использовать очень удобный инструмент — дополнение Firebug для браузера Mozilla Firefox.

Возьмем вот такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
    </head>
    <body>
        <div>
            <p>
                <em>Этот текст написан курсивом</em>
            </p>
            <p>
                <strong>
                    <em>А этот еще и жирным шрифтом</em>
                </strong>
            </p>
        </div>
    </body>
</html>

Разберемся со структурой. В теле документа <body> содержится контейнер <div>. Внутри этого контейнера лежит два абзаца <p>. В первом абзаце внутри тега <em> лежит текст. Во втором абзаце тоже лежит текст, только кроме тега <em>, он еще лежит внутри тега <strong>.

Можно эту схему представить в древовидном стиле:

Структура HTML

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

Мы можем прописать следующие стили:

div em {
    color: green;}

И эта конструкция окрасит текст обоих элементов <em> в зеленый цвет. Потому что оба они лежат внутри контейнера <div> и являются его потомками.

А можем написать так:

strong em {
    color: green;}

И окрасится в зеленый цвет только второй фрагмент текста.

Итак, запоминаем. Для адресации потомкам селекторы перечисляются через пробел. Самый «древний» предок указывается слева, а дальше — по уровню вложенности.

Следующий вид селекторов — селекторы дочерних элементов.

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

В предыдущем примере первый абзац <p> имеет дочерний элемент <em>. У второго абзаца <p> тоже есть потомок <em>, но он не является дочерним элементом, так как находится еще и внутри элемента <strong>. Вот как раз <strong> является дочерним элементом второго абзаца <p>. А второй <em> является дочерним для <strong>.

Немного запутал я Вас, но ничего. На самом деле все очень просто. Представьте себе, что все элементы — это семья. И проведите аналогию с родителями и детьми.

Итак, селекторы дочерних элементов в CSS записываются так:

p>em {
    color: blue;}

Эта конструкция окрасит текст только первого элемента <em> в синий цвет.

Селекторы соседних элементов. Еще их называют сестринскими.

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

1
2
3
4
5
6
7
8
<html>
    <head>
    </head>
    <body>
        <p>В этом абзаце <strong>есть</strong> соседние <em>элементы</em></p>
        <p>А в этом <strong><em>соседних элементов</em></strong> нет.</p>
    </body>
</html>

Зададим стиль соседних элементов:

strong + em {
    color: blue;}

Этот селектор окрасит в синий цвет текст, находящийся внутри тега <em> в первом абзаце.

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к cелектору em, но только в том случае, если он является соседним для cелектора strong и следует сразу после него.

Селекторы псевдоклассов.

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

Синтаксис написания селекторов псевдоклассов следующий:

a:hover {
    text-decoration: underline;}

Эта конструкция делает ссылки на странице подчеркнутыми, если на них наведен указатель мыши.

Синтаксис написания псевдоклассов очень прост. Пишем селектор, ставим двоеточие и указываем псевдокласс.

И последний вид селекторов — это селекторы псевдоэлементов.

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

Например:

p:first-letter {
    font-size: 200%;
    color: red;}

Эта конструкция задает размер шрифта 200% и красный цвет для первой буквы текста, который содержится в абзаце <p>.

Синтаксис написания селекторов псевдоэлементов такой же, как и у псевдоклассов.

Ну вот вроде бы мы и рассмотрели все виды селекторов.

Статья получилась немного слишком большая ;) Просто хотелось донести информацию так, чтобы было понятно даже новичку. Думаю, у меня получилось.

Если что-то не понятно, задавайте вопросы в комментариях — будем отвечать и дополнять статью, если понадобится.

Хотелось, конечно, еще рассмотреть приоритеты стилей CSS, то есть, какие стили будут применяться, если элемент попадает под действие нескольких разных селекторов. Но эта целая отдельная тема. Поэтому рассмотрим ее в другой статье. Читайте здесь: Наследование и приоритеты CSS стилей.

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.