Для чего в css квадратные скобки
Селекторы атрибутов
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Пример 13.3. Изменение стиля внешней ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 13.3).
Рис. 13.3. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 13.2 приёмом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведёт на другой сайт.
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий.
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Рис. 13.4. Добавление картинки к ссылкам
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать такой синтаксис.
В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Пример 13.5. Стиль для разных сайтов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Дефис в значении атрибута
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5 CSS 2.1 IE Cr Op Sa Fx
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
Вопросы для проверки
1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
3. К какому элементу будет применяться следующий стиль?
Комплексные селекторы
Селекторы являются одной, если не самой важной частью CSS. Они формируют каскад и определяют, как стили должны применяться к элементам страницы.
До недавнего времени внимание CSS никогда действительно не обращалось на селекторы. Время от времени появлялись небольшие обновления в пределах спецификации селекторов, но никогда не было никаких реальных новаторских улучшений. К счастью, в последнее время всё больше внимания уделяется селекторам, так что взглянем на то, как выбирать разные типы элементов и элементы в разных состояниях.
CSS3 принёс новые селекторы, открывая целый новый мир возможностей и улучшений существующей практики. Здесь мы обсудим селекторы, как старые так и новые, а также как наилучшим образом их использовать.
Типовые селекторы
Перед глубоким погружением в некоторые более сложные селекторы и те, которые предлагаются в CSS3, давайте взглянем на некоторые наиболее типовые селекторы на сегодня. Эти селекторы включают в себя селекторы типа, классы и идентификаторы.
Дочерние селекторы
Дочерние селекторы обеспечивают способ выбора элементов, которые находятся один в другом, что делает их детьми своего родительского элемента. Такой выбор может быть сделан двумя разными способами, с помощью селектора потомка либо прямого дочернего селектора.
Селектор потомка
Наиболее распространённым дочерним селектором является селектор потомка, который соответствует каждому элементу, который следует за определённым предком. Потомок не обязательно должен идти сразу после предка в дереве документа, вроде отношения родитель-ребёнок, но может находиться в любом месте внутри предка. Селекторы потомка создаются пробелом между отдельными элементами в селекторе, создавая новый уровень иерархии для каждого элемента списка.
Селектор article h2 является селектором потомка и выбирает только элементы
за пределами элемента не будет выбран.
Ниже приведены заголовки, из которых выбраны строки 3 и 5.
Прямой дочерний селектор
Порой селекторы потомка заходят слишком далеко, выбирая больше, чем хотелось бы. Иногда должны быть выбраны только прямые дети родительского элемента, а не каждый экземпляр элемента вложенный глубоко внутри предка. В этом случае может быть использован прямой дочерний селектор путём размещения знака больше (>) между родительским и дочерним элементом в селекторе.
Например, article > p является прямым дочерним селектором только когда элементы
| Пример | Название | Описание |
|---|---|---|
| article h2 | Селектор потомка | Выбирает элемент, который находится в любом месте внутри определённого предка. |
| article > p | Прямой дочерний селектор | Выбирает элемент, который находится непосредственно внутри определённого родителя. |
Родственные селекторы
Знать, как выбрать дочерние элементы, в значительной степени полезно и встречается довольно часто. Однако родственные элементы, т. е. элементы, у которых общий предок, также может потребоваться выбрать. Такая выборка может быть сделана с помощью общего родственного селектора и соседних селекторов.
Общий родственный селектор
Общий родственный селектор позволяет выбрать элементы, которые будут отобраны на основе их родственных элементов, т. е. те, у которых один и тот же общий родитель. Они создаются с помощью символа тильды (
) между двумя элементами внутри селектора. Первый элемент определяет, что второй элемент должен быть родственным с ним, и у обоих должен быть один и тот же родитель.
p — это общий родственный селектор, он ищет элементы
, которые следуют после любых элементов
в том же родителе. Чтобы элемент
был выбран, он должен идти после любого элемента
Абзацы в строках 5 и 9 выбраны, поскольку они идут после заголовка в дереве документа и у них тот же родитель, что и у родственного заголовка.
Соседние селекторы
Иногда может быть желательно иметь немного больше контроля, в том числе возможность выбрать родственный элемент, который следует непосредственно за другим родственным элементом. Соседний селектор будет выбирать только родственные элементы, непосредственно следующие за другим родственным элементом. Вместо символа тильды, как в случае с общим родственным селектором, соседний селектор использует символ плюс (+) между двумя элементами в селекторе. Опять же, первый элемент определяет, что второй элемент должен непосредственно следовать после него и быть ему родственным и у обоих элементов должен быть один и тот же родитель.
идущие непосредственно после элементов
. У обоих также должен быть один и тот же родительский элемент.
Абзац на строке 5 выбирается, так как непосредственно следует после его родственного заголовка и у них один общий родительский элемент.
Пример соседних селекторов
p
Селекторы атрибутов
Селектор наличия атрибута
Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках ([]) в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.
Селектор атрибута =
Для идентификации элемента с определённым и точно заданным значением может быть использован тот же селектор что и раньше, однако на этот раз внутри квадратных скобок после имени атрибута включают желаемое значение. Внутри квадратных скобок должно быть имя атрибута идущее после знака равно (=), где внутри кавычек и пишется желаемое значение атрибута.
Селектор атрибута *=
Когда мы пытаемся найти элемент на основе части значения атрибута, но не точного совпадения, может быть использован символ звёздочки (*) в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.
Селектор атрибута ^=
В дополнение к выбору элемента на основе того, что значение атрибута содержит указанный текст, можно также выбрать элемент, основанный на том, с чего начинается значение атрибута. Использование символа циркумфлекса (^) в квадратных скобках селектора между именем атрибута и знаком равенства означает, что значение атрибута должно начинаться с указанного текста.
Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа ^ применяется знак доллара ($) в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.
Селектор атрибута
Иногда значения атрибутов могут быть расположены через пробел друг от друга, в которых только одно из слов должно подходить для создания выборки. В этом случае использование символа тильды (
) в квадратных скобках селектора между именем атрибута и знаком равенства означает значение атрибута разделённое пробелами, из которых одно слово точно соответствует указанному значению.
Селектор атрибута |=
Когда значение атрибута разделено дефисом, а не пробелами, может быть использован символ вертикальной линии (|) в квадратных скобках селектора между именем атрибута и знаком равенства. Вертикальная линия означает, что значение атрибута может быть разделено дефисом, однако слова должны начинаться с указанного значения.
Пример селекторов атрибутов
=»tag»]
=
Псевдоклассы
Псевдоклассы похожи на обычные классы в HTML, однако они непосредственно не указаны в разметке, вместо этого они поселяются динамически как результат действий пользователя или структуры документа. Наиболее распространённый псевдокласс, и его вы, вероятно, видели раньше, это :hover. Обратите внимание, что этот псевдокласс начинается с двоеточия (:), как и все остальные псевдоклассы.
Псевдоклассы ссылок
Псевдоклассы действия пользователя
Псевдоклассы состояния интерфейса
Последние два элемента состояния интерфейса, псевдоклассы :checked и :indeterminate вращаются вокруг флажков и переключателей. Псевдокласс :checked выбирает флажки или переключатели, которые, как вы можете ожидать, помечены. Когда ни один флажок или переключатель не помечен и не выбран, то он живёт в неопределённом состоянии, для которого может быть использован псевдокласс :indeterminate для нацеливания на подобные элементы.
Псевдоклассы структуры и положения
Несколько псевдоклассов относятся к структуре и положению на основе того, где элементы находятся в дереве документа. Эти псевдоклассы приходят в разных формах и размерах, каждый из которых обеспечивает свою собственную уникальную функцию. Некоторые псевдоклассы существуют уже дольше других, однако CSS3 принёс целый новый набор псевдоклассов в дополнение к существующим.
:first-child, :last-child и :only-child
Здесь селектор li:first-child определяет первый пункт списка, в то время как li:last-child определяет последний пункт списка, таким образом, выбираются строки 2 и 10. Селектор div:only-child ищет
:first-of-type, :last-of-type и :only-of-type
Псевдокласс :first-of-type выберет первый элемент своего типа внутри родителя, в то время как псевдокласс :last-of-type выберет последний элемент этого типа внутри родителя. Псевдокласс :only-of-type выберет элемент, если он является единственным такого типа в родителе.
В приведённом ниже примере псевдоклассы p:first-of-type и p:last-of-type выберут, соответственно, первый и последний абзацы в статье, независимо от того, являются ли они на самом деле первыми или последними детьми в статье. Строки 3 и 6 выбраны этими селекторами. Селектор img:only-of-type определяет изображение в строке 5, как единственное изображение появляющееся в статье.
Число или выражение, которое находится в круглых скобках точно определяет, какой элемент или элементы, должны быть выбраны. Использование конкретного числа вычислит отдельный элемент с начала или с конца дерева документа, а затем выберет его. Использование выражения вычислит множество элементов с начала или с конца дерева документа и выберет их группу или повторения.
Использование чисел и выражений в псевдоклассах
Как уже упоминалось, использование конкретного числа в псевдоклассе вычисляет с начала или с конца дерева документа и выбирает один соответствующий элемент. Например, селектор li:nth-child(4) выберет четвёртый пункт в списке. Подсчёт начинается с первого пункта списка и увеличивается на единицу для каждого пункта списка, пока, наконец, не обнаружит четвёртый пункт и выберет его. При указании конкретного числа оно должно быть положительным.
Например, селектор li:nth-child(3n) будет определять каждый третий элемент пункта списка. Использование этого выражения соответствует 3×0, 3×1, 3×2 и так далее. Как вы можете видеть, результаты этого выражения выбирают третий, шестой и каждый элемент кратный трём.
Селектор li:nth-child(4n+7) определит каждый четвёртый пункт списка, начиная с седьмого пункта. Опять же, использование этого выражения эквивалентно (4×0)+7, (4×1)+7, (4×2)+7 и так далее. Результаты этого выражения приведут к выбору седьмого, одиннадцатого, пятнадцатого и каждого четвёртого элемента.
При использовании аргумента n без числа впереди, переменная a расценивается как равная 1. Селектор li:nth-child(n+5) выберет каждый пункт списка, начиная с пятого, оставив первые четыре пункта списка не выбранными. В выражении это разбирается как (1×0)+5, (1×1)+5, (1×2)+5 и так далее.
:nth-child(n) и :nth-last-child(n)
Очередное изменение выражения, на этот раз с отрицательным значением, даст новый выбор. Здесь селектор li:nth-child(-n+4) определяет четыре верхних пункта списка, оставляя остальные пункты не выделенными, таким образом будут выбраны строки со 1 по 4.
Добавление отрицательного числа перед аргументом n снова изменяет выбор. Здесь селектор li:nth-child(-2n+5) определяет каждый второй пункт списка из первых пяти пунктов, таким образом, будут выбраны пункты в строках 2, 4 и 6.
:nth-of-type(n) и :nth-last-of-type(n)
Используя псевдокласс :nth-of-type(n) в селекторе p:nth-of-type(3n) мы можем определить каждый третий абзац в родителе, независимо от других родственных элементов внутри родителя. Здесь выбираются абзацы в строках 5 и 9.
Псевдокласс :target
Псевдокласс :empty
Псевдокласс :empty позволяет выбрать элементы, которые не содержат детей или текст. Комментарии, инструкции по обработке и пустой текст не считаются детьми и не рассматриваются как таковые.
Использование псевдокласса div:empty определит
Псевдокласс :not
Пример с псевдоклассами
Псевдоэлементы
Псевдоэлементы — это динамические элементы, которые не существуют в дереве документа и при использовании с селекторами эти псевдоэлементы дают уникальные части страницы, которые можно стилизовать. Один важный момент следует отметить — только один псевдоэлемент может быть использован в селекторе в определённое время.
Текстовые псевдоэлементы
Демонстрация текстовых псевдоэлементов
Псевдоэлементы, генерируемые содержимое
Псевдоэлемент :before создаёт псевдоэлемент до или впереди выбранного элемента, в то время как :after создаёт псевдоэлемент после или позади выбранного элемента. Эти псевдоэлементы выводятся вложенными внутри выбранного элемента, а не за его пределами. Ниже псевдоэлемент :after используется для отображения значения атрибута href у ссылок в круглых скобках после самой ссылки. Такая информация полезна, но, в конечном итоге, не всякий браузер поддерживает эти псевдоэлементы.
Демонстрация псевдоэлементов, генерируемых содержимое
Псевдоэлемент ::selection
Двоеточие (:) и двойное двоеточие (::)
Псевдоэлемент ::selection был добавлен в CSS3 в попытке отделить псевдоклассы от псевдоэлементов с помощью двойного двоеточия, которое было добавлено к псевдоэлементам. К счастью, большинство браузеров будут поддерживать оба значения, одиночные или двойные двоеточия у псевдоэлементов, однако псевдоэлемент ::selection всегда должен начинаться с двойного двоеточия.
Демонстрация псевдоэлементов
| Пример | Название | Описание |
|---|---|---|
| .alpha:first-letter | Текстовый псевдоэлемент | Выбирает первую букву текста внутри элемента. |
| .bravo:first-line | Текстовый псевдоэлемент | Выбирает первую строку текста внутри элемента. |
| div:before | Генерируемое содержимое | Создаёт псевдоэлемент внутри выбранного элемента в его начале. |
| a:after | Генерируемое содержимое | Создаёт псевдоэлемент внутри выбранного элемента в его конце. |
| ::selection | Псевдоэлемент ::selection | Выбирает часть документа, который был выделен с помощью действий пользователя. |
Поддержка селекторов в браузерах
В то время как эти селекторы предлагают разные возможности и способности делать некоторые действительно удивительные вещи с помощью CSS, они иногда страдают от плохой поддержки браузеров. Перед тем, как делать что-либо слишком критичное, проверьте селекторы которые вы желаете использовать в наиболее популярных браузерах, а затем сделайте вывод о том, подходят они вам или нет.
CSS3.info предлагает инструмент CSS3 Selectors Test, который будет информировать вас о том, какие селекторы поддерживаются браузером. Также неплохой идеей будет проверить поддержку браузера непосредственно в нём.
Кроме того, Selectivizr, утилита JavaScript, обеспечивает великолепную поддержку этих селекторов в Internet Explorer 6-8. Больше поддержки при необходимости может также предложить jQuery selectors.
Скорость и производительность селекторов
Важно обратить внимание на скорость и производительность селекторов, так как использование слишком большого количества сложных селекторов может замедлить отображение страницы. Будьте внимательны и когда селектор начинает выглядеть немного странно, подумайте о том чтобы пересмотреть его и найти лучшее решение.
Квадратные скобки в CSS
Что это значит, когда что-то находится в квадратных скобках в CSS? E.g.
4 ответа
Я видел здесь квадратные скобки, которые используются в именах классов: Что означают эти квадратные скобки?
Ваш (полный) пример означает «Выберите элементы ввода типа, которые имеют атрибут типа со значением radio«, например
Это селектор атрибутов в CSS
E[foo=»warning»] Соответствует любому элементу E, значение атрибута «foo» которого точно равно «warning».
Это селектор атрибутов. Он выбирает элементы, имеющие указанный атрибут. Вы можете узнать больше о них здесь: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors
В вашем примере: input[type=»radio»]
Это соответствовало бы элементу, который выглядел так:
Селектор, который вы указали в вопросе, означает, что ему понадобятся все три слова: имя элемента ‘input’, атрибут ‘type’ и значение этого атрибута ‘radio’.
Надеюсь, это поможет.
Это селектор атрибутов CSS, который будет выбирать только входы с типом, установленным на радио, то есть он будет выбирать все переключатели. Вот статья, объясняющая это немного подробнее.
Похожие вопросы:
Разрешены ли квадратные скобки в URLs? Я заметил, что Apache commons HttpClient (3.0.1) бросает IOException, wget и Firefox, однако принимают квадратные скобки. URL пример.
Я хотел бы, чтобы в форму я мог вводить только буквы алфавита, цифры и квадратные скобки, за исключением специальных символов. Можно ли в скобки включать специальные символы? У меня такие есть: if.
Я видел здесь квадратные скобки, которые используются в именах классов: Что означают эти квадратные.
Я редактирую сайт, который унаследовал, и вижу синтаксис css, который не узнаю. Кто-нибудь когда-нибудь видел этот синтаксис раньше? Что означают квадратные скобки внутри стиля? Спасибо, Роб.
Я понимаю, что квадратные скобки позволяют использовать зарезервированные имена или ранее запрещенные символы, такие как пробелы в ваших идентификаторах. Я думал, что добавлять их везде-хорошая.
Мне нужно написать на моей странице gitlab project wiki блок кода, содержащий квадратные скобки. К сожалению, квадратные скобки превращаются в ссылку. Я предполагаю, что gitlab использует язык.
Как я могу удалить двойные квадратные скобки массива numpy в одиночные квадратные скобки, такие как список? [[0, 3.49, 0, 4.55]] желаемый результат [0,3.49,0,4.55] Я искал SO в поисках массива numpy.
Хотя я могу переименовать Excel-Files в имя, включающее квадратные скобки (что прекрасно открывается). Я не могу сохранить вновь созданный файл в пределах Excel, используя квадратные скобки в имени.