Вы здесь: Главная > CSS > Универсальный, дочерний и смежные селекторы

Универсальный, дочерний и смежные селекторы

Опубликовано автором Просмотры: 14

В предыдущих руководствах мы рассмотрели селекторы HTML, селекторы классов и идентификаторов, а также то, как комбинировать селекторы для нацеливания на определённые поля элементов. Используя три крошечных символа, вы можете дополнительно точно определить элемент, уменьшая необходимость раздувать свой HTML атрибутами class и ID.

Универсальные селекторы

Используя звёздочку (“ * ”), вы можете настроить таргетинг на все, что находится под солнцем. Вы можете использовать его самостоятельно для установки глобальных стилей для страницы или как потомок селектора для установки стилей всего внутри чего-либо.

Следующее, например, установит поля и отступы для всего на странице равными нулю, а все внутри элемента с идентификатором “контакт” будет отображаться в виде блока:

* {
    margin: 0;
    padding: 0;
}

#contact * {
    display: block;
}

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

Дочерние селекторы

Символ большего значения (“>”) может использоваться для указания чего-то, что является дочерним элементом чего-то другого, то есть чего-то, непосредственно вложенного во что-то.

Итак, с помощью этого HTML…

<ul id="genus_examples">
    <li>Кошки
        <ul>
            <li>Пантера</li>
            <li>Тигр</li>
            <li>Гепард</li>
        </ul>
    </li>
    <li>Обезьяны
        <ul>
            <li>Орангутанг</li>
            <li>Шимпанзе</li>
            <li>Макака</li>
        </ul>
    </li>
</ul>

… и следующий CSS…

#genus_examples > li { border: 1px solid red }

… красная рамка будет нарисована только вокруг “Кошек” и “Обезьян”, а не вокруг каждого отдельного элемента списка (что было бы в случае с

#genus_examples li { border: 1px solid red })

Это потому, что подобные “Пантера” и “Тигр” являются внуками “genus_examples”, а не детьми.

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

Знак плюса (“+”) используется для определения соседнего родственного элемента, по сути, чего-то, следующего за чем-то.

Со следующим HTML:

<h1> Облачные леопарды </h1>
<p> Облачные леопарды ─ это кошки, принадлежащие к роду Неофелис.</p>
<p> Существует два сохранившихся вида: Neofelis nebulosa и Neofelis diardi.</p>

… и CSS…

h1 + p { font-weight: bold }

Только первый абзац, следующий за заголовком, будет выделен жирным шрифтом.

Другой, CSS 3, селектор “general sibling” использует тильду (“~”) и будет сопоставлять элемент, следующий за другим, независимо от его непосредственности.

Итак, в приведённом примере:

h1 ~ p { font-weight: bold }

все абзацы будут оформлены после заголовка верхнего уровня, но если бы перед p были какие-либо h1, они не были бы затронуты.

Страницы в тему:

Добавить комментарий