Универсальный селектор. Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS Подробнее про универсальный селектор
- Выполняемая задача — выбор всех элементов. Вообще всех.
- Обозначение — символ «звездочка» — *.
- Пример использования:
для всех элементов сбросить отступы по-умолчанию
Подробнее про универсальный селектор
Появился в CSS с версии 2. Соответствует любому элементу в . Поэтому стили, указанные для универсального селектора применяются ко всем элементам сразу. По этой причине, советую применять его очень осторожно — при наследовании стилей могут быть неприятности. Или, скорее, малопредсказуемое (для неопытного кодера) поведение. Подробнее этот момент рассмотрим в разделе, посвященном наследованию.
Еще одна особенность универсального селектора — когда он используется в сочетании с другим селектором (например, селектором класса, идентификатора или атрибута) в составе простого селектора, то может быть безнаказанно пропущен. Это примерно то же самое, что вместо «Все дромадеры — это одногорбые верблюды» сказать просто «дромадеры — это одногорбые верблюды». Смысл не поменялся.
Пример:
*.error { color: red; } .error { color: red; } /* эти два правила эквивалентны. Универсальный селектор во втором случае пропущен */
Область применения
Собственно, удобнее всего применять универсальный селектор, как в первом примере — для сброса зависящих от браузера начальных значений стилей (в частности, отступов).
Но даже такое применение не всегда окажется удачной идеей. Из-за недостатков универсального селектора, описанных в статье , лучше использовать . То есть использовать селекторы типа.
Вот так плавненько мы с тобой и подошли к следующей теме. С универсальным селектором, вроде, разобрались. Самое время двигаться дальше. Следующая остановка — .
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
В CSS3 универсальный селектор применяется также в комбинации с пространством имён.
- ns|* - все элементы в пространстве имён ns .
- *|* - все элементы во всех пространствах имён.
- |* - все элементы без явного указания пространства имён.
Синтаксис
* { Описание правил стиля }
Для обозначения универсального селектора применяется символ звёздочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Примечание
Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html , что нелогично, поскольку тег является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль для IE6, например конструкция * html body { ... } будет добавлять стиль для селектора body в IE6 и ниже и не работает в других браузерах.
В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Язык описания внешнего вида документа CSS постоянно развивается. Со временем растут не только его мощность и функциональность, повышаются также гибкость и удобство использования.
Начнем разбираться. Откройте любой учебник CSS, как минимум один раздел в нем будет посвящен видам селекторов. В этом нет ничего удивительного, поскольку они являются одним из самых удобных способов управления контентом страницы. С их помощью можно взаимодействовать с абсолютно любыми элементами HTML. Сейчас существует 7 видов селекторов:
- для тегов;
- для классов;
- для ID;
- универсальные;
- атрибутов;
- для взаимодействия с псевдоклассами;
- для управления псевдоэлементами.
Синтаксис прост. Чтобы научиться использовать достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.
Селекторы тэгов
Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег
Достоинства - простота использования, универсальность.
Недостатки - полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?
Селекторы класса
Самый распространенный вариант. Предназначен для управления тегами с атрибутом class. Предположим, в вашем коде есть три блока
Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию.red. Вторым - .blue и так далее.
Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант - использовать какую-нибудь методологию, вроде БЭМ.
Достоинства - довольно высокая гибкость.
Недостатки - у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.
Селектор по ID
Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки (« # »), затем имя блока. Например, #red.
ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный а затем назначите ему же id blue и укажете синий цвет, блок станет синим.
Достоинства - можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.
Недостатки - легко запутаться в большом количестве ID и class.
Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.
Универсальный селектор
Синтаксис: знак зведочки («*») и фигурные скобки, т. е. * {}.
Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.
Достоинства - можно управлять большим количеством элементов одновременно.
Недостатки - недостаточно гибкий вариант. Вдобавок, использование этого селектора в некоторых случаях замедляет работу страницы.
По атрибутам
Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них - text, второй - password, третий - number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:
input{}
Этот селектор атрибутов выберет все input с типом text.
Инструмент довольно гибкий, его можно использовать с любыми тегами, у которых возможно наличие атрибутов. Но и это еще не все! В спецификации CSS есть возможность управлять элементами даже с большим удобством!
Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:
input{} или input
Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:
CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».
Также можно выбирать теги, атрибуты которых начинаются с определенных символов:
или заканчиваются ими:
{}.
Достоинства - максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.
Недостатки - используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?
Селекторы псевдоклассов
Псевдокласс обозначает состояние элемента. Например, :hover - то, что происходит с частью страницы при наведении курсора, :visited - посещенная ссылка. Сюда же входят элементы вроде:first-child и:last-child.
Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:
Btn:hover {
Background-color: red;
Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s - в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.
Достоинства - активно используются для «оживления» страниц. Просты в применении.
Недостатки - их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.
Селекторы псевдоэлементов
«Псевдоэлементы» - это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент::first-letter. Он дает возможность управлять внешним видом первой буквы.
Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.
Достоинства - дают возможность гибко настраивать внешний вид страницы.
Недостатки - новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.
Подведем итог
Селектор - мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.
* { Описание правил стиля }
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
В примере 1.50 показано одно из возможных приложений универсального селектора - выбор шрифта и размера текста для всех элементов документа.
Пример 1.50. Использование универсального селектора |
|||||||||||