Как обратиться к определенному элементу css
Перейти к содержимому

Как обратиться к определенному элементу css

  • автор:

Как обратиться к определенному элементу css

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

David Walsh

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] < /* woohoo! */ >

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel = external]
Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

Attribute Equals

h1[rel=external]

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

Jeff Starr David Walsh Richard Felix

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

a[href=http://perishablepress.com]

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

input[type=text] < padding: 3px; >input[type=radio]

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

[rel *= external]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:

Attribute Contains

h1[rel*=external]

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

Вы можете подсветить все эти элементы следующим образом:

div[id*=post]
[rel ^= external]
Атрибут начинается с заданного значения

Attribute Begins

h1[rel^=external]

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

a[href^=http://perishablepress.com]
[rel $= external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

Attribute Ends

h1[rel$=external]

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

a[href$=#], a[href$=?]
[rel ~= external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;

Attribute Space Separated

h1[rel~=external]

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel |= external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».

Attribute Dash Separated

h1[rel|=external]
[title = one][rel ^= external]
Соответствие по нескольким атрибутам

Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам.

Multiple Attributes

h1[rel=handsome][title^=Important]

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Селекторы атрибутов

Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов . Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.

Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.

Селектор [attribute]

Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.

[title]

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

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

a[target]

В примере 1 показано изменение стиля элемента , когда к нему добавляется атрибут readonly .

Пример 1. Вид элемента в зависимости от его атрибута

В данном примере селектор textarea устанавливает стиль для всех элементов , а селектор textarea[readonly] для элементов , к которым добавлен атрибут readonly . Результат примера показан на рис. 1.

Изменение стиля элемента в зависимости от наличия атрибута readonly

Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly

Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для атрибут type по умолчанию равен text , но селектор input[type] будет работать для и не будет для , хотя сами элементы отображаются одинаково.

Селектор [attribute=»value»]

Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для , у которого значение type равно checkbox , селектор запишется следующим образом.

input[type="checkbox"]

Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.

Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.

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

Пример 2. Изменение поля формы

Результат данного примера показан на рис. 2.

Изменение стиля элемента в зависимости от значения атрибута

Рис. 2. Изменение стиля элемента в зависимости от значения атрибута

Селекторы атрибутов можно применять вместо классов, поскольку [class=»block»] и .block выберут одни и те же элементы.

Селектор [attribute^=»value»]

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

[class^="view"]

При этом будут выделены элементы с классом view, view-block, viewer, но не block-view.

В примере 3 мы делаем жирными ссылки, адреса которых начинаются с ключевого слова http://. Это позволяет обозначить ссылки, ведущие на другие сайты.

Пример 3. Изменение стиля ссылок

Результат данного примера показан на рис. 3.

Изменение стиля ссылок

Рис. 3. Изменение стиля ссылок

Селектор [attribute*=»value»]

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

[class*="view"]

При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

Пример 4. Стиль для сайта GitHub

Результат данного примера показан на рис. 4.

Изменение стиля ссылки

Рис. 4. Изменение стиля ссылки

Селектор [attribute$=»value»]

Устанавливает стиль для элемента, когда значение атрибута оканчивается указанным текстом. К примеру, для выбора всех элементов, у которых класс завершается view, используется следующая запись.

[class$="view"]

При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

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

Пример 5. Стиль для разных доменов

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

Добавление картинки к ссылкам

Рис. 5. Добавление картинки к ссылкам

Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента , у которого есть атрибут type со значением password и атрибут required , запись будет следующей.

input[type="password"][required]

Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.

как обратиться в style.css к определенному элементу?

Используйте псевдоклассы. Если нужен первый или последний дочерние элементы, то для этого есть :first-child и :last-child. Если какой-то определённый, то пишите :nth-child(n), где n — номер дочернего элемента.

.odin .dva:first-child < color: blue; >.odin .dva:last-child < color: red; >.odin .dva:nth-child(5)

Отслеживать
ответ дан 20 мар 2020 в 10:05
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 49 49 бронзовых знаков
отлично) работает, но а если на другой именно конкретный элемент?)
20 мар 2020 в 10:10
@VladApalkov, я дополнил ответ
20 мар 2020 в 10:13
отлично) всем спасибо)
20 мар 2020 в 10:17

Как вариант, можно задать элементу два класса и обратиться .ggg

Отслеживать
ответ дан 20 мар 2020 в 11:44
Alexey Pavlyuk Alexey Pavlyuk

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Селектор следующего элемента

Общий комбинатор смежных селекторов (~) разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.

Синтаксис

element ~ element

Пример

p ~ span  color: red; > 
span>Это не красный.span> p>Здесь параграф.p> code>Тут какой-то код.code> span>А здесь span.span> 

Спецификации

Specification
Selectors Level 4
# general-sibling-combinators

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 23 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *