Селектор тегов css – Селекторы тегов | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Селекторы тегов | htmlbook.ru

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

Тег { свойство1: значение; свойство2: значение; … }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 7.1).

Пример 7.1. Изменение стиля тега абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   P { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }
  </style>
 </head> 
 <body>

  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>

 </body>
</html>

В данном примере изменяется цвет и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.

Следует понимать, что хотя стиль можно применить к любому тегу, результат будет заметен только для тегов, которые непосредственно отображаются в контейнере <body>.

Вопросы для проверки

1. В какой строке содержится ошибка?

h2 { margin-left: 20px; }
p { margin-left: 20px; padding-left: 20px; }

h3 { margin-right: 20px; }
head { color: #rob; }
body { font-size: 11pt; color: #aaa; }

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body {
background-color: #ffe9f2
color: #6e143b
}

body написан строчными буквами.
Свойство background-color неверное, следует писать background.
Значения цветов указаны неправильно.
В качестве селектора применять body некорректно.
Не хватает точки с запятой.

3. Какая строка написана правильно?

<P> { color: #333; }
P { color: #333; }
P: { color: #333;}
P { color: 333; }
P { color: #3333; }

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

!DOCTYPE
A
HEAD
TITLE
BODY

5. Как добавить фоновый цвет ко всем элементам <h2>?

h2 { background-color: white }
h2.all { background-color: white }
h2:all { background-color: white }
h2[all] { background-color: white }

h2#all { background-color: white }

Ответы

1. head { color: #rob; }

2. Не хватает точки с запятой.

3. P { color: #333; }

4. BODY

5. h2 { background-color: white }

htmlbook.ru

Селекторы тегов CSS — Как создать сайт

Селекторы тегов в языке CSS

Селекторы
Селекторы тегов в CSS

Схема CSS-кода выглядит следующим образом:


селектор {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

В селекторе тега, в качестве селектора выступает имя тега:


имяТега { CSS-свойство: значение; CSS-свойство: значение; и т.д. }

Селекторы тега — это выборка элементов по именам их тегов: h2, p, img, a и т.д. Это пока что единственный знакомый нам селектор, который мы изучали в учебнике по CSS.

Допустим у нас есть HTML-документ, содержащий следующий код:


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p> 
 </body>
</html>

Открыв документ в браузере, получим следующее.

Назначим с помощью CSS, абзацам синий цвет текста. Для этого, в качестве селектора нужно написать имя тега абзаца p и сразу у всех абзацев, цвет текста станет синим:


<style>
p {
 color: blue;
}
</style>

Код HTML-документа:


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   p {
    color: blue;
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв документ в браузере, получим следующее.

Читать далее: Селекторы классов CSS

Дата публикации поста:

5 февраля 2016

Дата обновления поста: 16 октября 2014

Навигация по записям

gabdrahimov.ru

Селекторы CSS

Селектор тегов

Итак мы подключили таблицу стилей. Давайте теперь посмотрим, что же это такое – стиль.

Стиль состоит из двух частей – «селектор» и «свойство: значение;».

В каждом селекторе может быть множество свойств и значений. Вам это ничего не напоминает? Вспомните HTML – < тег атрибут=”значение”>. Опять возникает вопрос: “а зачем?”. Скоро поймёте.

Селектор {
свойство: значение;
}

Давайте разберём эту запись. Селектор (англ. отобранный, выбранный) указывает, какой элемент HTML кода мы выберем, для придания ему тех, или иных

свойств и значений.

Например, захотелось нам изменить цвет всего текста, заключённого в теги <p>, на странице нашего сайта.

Для этого создаём селектор тега р, задаём ему свойство color, и значение #A5260A.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> p{ color:#A5260A; } </style> /head> body> <p>Текст абзаца статьи</p> <p>Текст абзаца статьи</p> <p>Текст абзаца статьи</p>

</body>
</html>

И смотрим, что выдаст браузер

Как видим всё, что было заключено в тег <p>, приобрело заданный цвет.

Итак, ещё раз вникнем, что мы сделали. В область “селектор” мы поставили тег, свойства которого нам захотелось изменить, вернее изменить свойства того, что заключено в этот тег.

В области “свойства:” указали, какое именно свойство будет меняться, и в области “значение;”, как это свойство будет изменено.

Селектор идентификатор (якорь)

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

Название этому якорю придумываем самостоятельно. У меня “ab”, а можно “p” или “nev”.

<p>Текст абзаца статьи</p> <p>Текст абзаца статьи</p> <p>Текст абзаца статьи</p>

Затем создаём селектор для этого якоря, и зададим цвет.

#ab{ color: #A5260A; }

И полностью, как это делается в html документе

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#ab{
color: #A5260A;
}
</style>
</head><body>
  <p>Текст абзаца статьи</p>
    <p>Текст абзаца статьи</p>
  <p>Текст абзаца статьи</p>
</body>
</html>

Посмотрим, как это отобразит браузер.

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

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

Селектор классов

Ещё немного усложним. Допустим, что какому либо элементу, у нас уже задан идентификатор и стили, а внутри этого элемента, есть ещё один, или несколько, вид которых нам хотелось бы сделать отличным от других, или задать им какой-то определённый размер и расположение.

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

Задаём идентификатор и класс элементам html кода

<ol> <li>Строка списка</li> <li>Строка списка</li> <li>Строка списка</li> <li>Строка списка</li> <li>Строка списка</li> <li>Строка списка</li> </ol>

И создаём селекторы идентификатора и класса

#ab{ color: #A5260A; } .nev{ color: #18a40a; }

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

Допустим, собрались Вы задать, при помощи класса, цвет нескольким элементам, значит надо назвать его «.color». Это чтоб лучше ориентироваться потом в том, что написали.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#ab{
  color: #A5260A;
}
.nev{
  color: #18a40a;
}
</style>
</head>
<body>
  <ol>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
  </ol></body>
</html>

И смотрим, что нам покажет на это браузер.

111

Всё как и планировали. Идентификатор задан всему списку, и он коричневый, а две строки согласно классам — зелёные.

Групповые селекторы

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

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

Пишутся они через запятую, без пробела

h2,p,h4,img{ border: 2px solid #0a29a4; width: 150px; }

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
h2,p,h4,img{
  border:2px solid #0a29a4;
  width:150px;
}
</style>
</head>
<body>
  <h2>Заголовок</h2>
    <p>Абзац</p>
      <img src="http://trueimages.ru/img/9e/70/d2dbf025.jpg">
    <h4>Подзаголовок</h4>
  <p>Абзац</p></body>
</html>

Посмотрим, что покажет браузер.

111

Вот, пожалуйста. У всех выбранных тегов, появилась рамочка. Можно станцевать корробори (групповой танец австралийских аборигенов, отражающий радости жизни).

Селекторы потомков

Селектор потомков позволяет задавать какие либо свойства потомкам, через их родителей.

Дело в том, что у тегов очень строгий принцип наследования, то есть все теги, располагающиеся внутри других тегов, являются их потомками, и патриархом у них является тег < html>.

Затем идут его дети — теги <head> и <body>, каждый со своими потомками, и так далее.

Посмотрим на примере списков. В упорядоченном списке, родитель <ol> имеет несколько потомков <li>.

В неупорядоченном, родитель <ul>, так же имеет потомков <li>. Наша задача — задать нужные свойства только потомкам упорядоченного списка.

И сделать это можно через родителя <ol>, не прибегая к идентификаторам и классам. В этом случае родитель и наследник прописываются через пробел.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
ol li{
  color: #a40a0d;
}
</style>
</head>
<body>
  <ol>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
  </ol>  <ul>
    <li>Строка списка</li>
    <li>Строка списка</li>
    <li>Строка списка</li>
  </ul>
</body>
</html>

Смотрим картинку в браузере.

111

Как видим, окрасились только теги “li”, являющиеся потомками тега “ol”, хотя в следующем неупорядоченном списке, тоже есть теги “li”.

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

И ещё о наследовании. Часто случаются такие ситуации, когда какой либо стиль бывает задан всему тегу <body>, а внутри него, какому-то элементу задаётся другой стиль, и так бывает по нескольку раз в порядке убывания.

Поэтому CSS и называются каскадные таблицы стилей. Так вот, браузер отобразит элемент в том стиле, который находится к нему, элементу, ближе.

Перемена

Еврейская Винда:
После загрузки Windows появляется надпись «Таки я загрузилась! » и в течение 15 минут играет мелодия «Семь сорок», которую нельзя не приостановить, не отменить
При открытии любой папки или файла появляется предупреждающее сообщение: «И оно тебе туда надо? »
Пpи нажатии на клавишу «Стаpт» появляется сообщение «Hу, шо ты тут клацаешь, пошел бы лучше в футбол поиграл …».

Тeги div и span < < < В раздел > > > Шрифты для сайта в CSS

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

starper55plys.ru

Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения

Всем добра!

Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».

Поехали.

Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:

…
<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”>Нажми меня</button>
            </div>
        </div>
    </div>
</form>
…

и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:

.button_submit

Добро пожаловать в мир CSS.

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:


<form class=“afhfsdh__”>
    <div>
        <div class=“hfgeyq fjjs qurlzn”>
            <div class=“fjdfmzn fjafjd”>
                <button type=“submit” class=“ajffalf wjf_fjaap”></button>
            </div>
        </div>
    </div>
</form>
…

(все названия css классов уменьшены с помощью оптимизатора)

, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’], вместо XPath: //form//button[@type=‘submit’]

Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).

Как вы могли уже догадаться, символ. используется вместо слова class и будет искать вхождение данного класса в любом элементе, в независимости от количества классов у этого элемента.

Смотрите:


<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”></button>
            </div>
        </div>
    </div>
</form>

css для элемента button: .button_submit, при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button. Порядок классов роли не играет, поэтому их можно поменять местами:

 .wrapper_button.button_submit .

Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –

css: button.

И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::

button.button_submit

и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’]. Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id]. Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’], но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit. Соединять все вместе также достаточно просто:

button[type=‘submit’].button_submit
тег   атрибут        класс

Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:


<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”></button>
            </div>
        </div>
    </div>
</form>

css:form > div > div > div > button.button_submit

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

Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit

Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span:


<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <div class=“content”></div>
                <span data-id=“link”>Ссылка</span> <!-- элемент с атрибутом data-id -->
                <button type=“submit” class=“button_submit wrapper_button”> <!-- искомая кнопка --></button>
            </div>
        </div>
    </div>
</form>

[data-id=‘link’] + button найдет button, у которого выше на один уровень есть родственник с атрибутом data-id=”link”. Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.

NOTE:

div + span[data-id=‘link’] + button

Дополнительно вы можете собирать “паровозик” из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов.

Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’] — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’].

Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.

a[href^=“https:”] — найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”] — найдет все ссылки, которые заканчиваются на .pdf.

Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:


<div class=“tiles”>
    <div class=“tile”>…</div>
    <div class=“tile”>…</div>
</div>

Как найти второй div class=“tile” у div class=“tiles”? Варианта два:

div > div:nth-of-type(2) div > div:nth-child(2)

Но в чем различие между этими двумя селекторами? Дополним пример:


<div class=“tiles”>
	<a class=“link”>…</a> <!—1—>
	<div class=“tile”>…</div><!—2—>
	<div class=“tile”>…</div><!—3—>
</div>

css 1 вариант: div > div:nth-of-type(2)
css 2 вариант: div > div:nth-child(2)

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

Разгадка:

первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div, который является потомком родителя . Второй

<div>

у элемента

<div class=“tiles”>

это третья строка. В свою очередь nth-of-type ищет второй элемент у родителя

<div class=“tiles”>

, который должен являться тегом

div

, это строка номер два.

Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child, и тогда вам будет неважно, куда поместят ссылку

<a>

: наверху, между

<div>

или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.

Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”]. А что если есть существует более быстрый способ поиска по id элемента?

#value. “#” - указатель, что поиск осуществляется по id.

Используя все приобретенные навыки попробуйте написать селектор для кнопки

<button>


Отправить
…
<div>
    <div class=“tile_wrapper tile content”>
        <div class=“row row_content”>
            <div class=“outline description__on”></div>
            <div class=“outline description__off button_send hover_mouse”>
                <button class=“outline button_send”>Отправить</button>
            </div>
        </div>
    </div>
</div>

Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.

Спасибо!

habr.com

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

div[id$=“_myDiv”] {
  // CSS правило
}

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

<!-- HTML -->
<div> 
  Какой-то текст 
</div>

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

div[id$="_LoginPanel"] {
  margin: 0 3em;
  padding: 1em;
}

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

div[id$=“myDynamicDiv”] {
  // CSS правила
}

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

<!-- HTML -->
<div>
  <h2>My custom panel</h2>
</div>

Селектор будет выглядеть следующим образом:

div[class^="myPanel_"] {
  // CSS правила
}

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

<div>
  <h2>Какой-то текст</h2>
  <form>...</form>
</div>

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

div[class*="logoutPanel"] {
 // CSS правила
}

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

<!-- HTML -->
<div class=“3453_mydynamicdiv”>
  <h2>My Dynamic Div</h2>
</div>

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
  // CSS правила
}

// 2-й способ – выбор всех элементов класса
.3453_mydynamicdiv {
  // CSS правила
}

Краткий обзор селекторов атрибутов:

= значение атрибута эквивалентно определённым символам;
$= значение атрибута оканчивается определенными символами;
^= значение атрибута начинается с определенных символов;
*= значение атрибута содержит определенные символы.

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

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

<ul>
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li>Music</li>
 <li>Merch</li>
</ul>

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

.nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}

Можно пойти дальше и выбирать любые атрибуты.

Например:

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

p::first-letter {
  // стиль буквы
}

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}

Этот подход освобождает от необходимости использования JavaScript.

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:

article:first-of-type {
  margin-top: 0;
}

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Данная публикация представляет собой перевод статьи «Advanced CSS Selectors you never knew about» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Селекторы CSS | CSS

CSS селекторы позволяют установить связь одного правила с определенным элементом HTML. А также, чтобы задавать стили для отдельных элементов, игнорируя другие:

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Селекторы CSS</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <h2> Селекторы CSS</h2>
    <p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
  </body>
</html>

Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.

Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:

Указанный атрибут класса в элементе HTML;
Соответствующий селектор классов CSS.

Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:

<p> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>

Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:

.synopsis {
  color: #7E8184;        /* Светло серый */
  font-style: italic;
}

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

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

Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:

.button {
  color: #FFF;
  background-color: #5995DA;    /* Синий */
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;    /* Темно-серый */
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:

<div>Кнопка Один</div>

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

Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div>  <!-- Добавьте это -->
<h2> Селекторы CSS</h2>
    <p >Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

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

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.

Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа. Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

<div>Кнопка Один</div>
<div>Кнопка Два</div>

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

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:

<div>Кнопка Два</div>

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Желтый */
}

Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
Переопределение существующего в классе .button стиля — background-color.

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.

Другими словами, следующие элементы эквивалентны:

<!-- В результате элементы будут отображаться на странице одинаково -->
<div>Кнопка Два</div>
<div>Кнопка Два</div>

Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h2 em {
  /* определенные стили */
}

Можно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так:

/* Старайтесь избегать такого */
.article h3 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div>
  <h3>
    <span>Это <em>на самом деле</em> особенный текст.</span>
  </h3>
</div>

Если захотите применить эти стили к заголовку <h3>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h4>.

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

Классический пример — это ссылка. Веб-разработчик создает элемент <a href>. После того как браузер отобразил его, пользователи могут взаимодействовать с этой ссылкой: навести на нее курсор мыши, кликнуть ссылку и перейти по ней:

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

В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

:link — ссылка, по которой пользователь еще не переходил;
:visited — ссылка, по которой пользователь переходил раньше;
:hover — ссылка, на которую пользователь навел курсор мыши;
:active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited, когда мы изменим атрибут href на URL-адрес, который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

a:visited:hover {
  color: orange;
}

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она «перекрашивается» в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS, о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Можно исправить это с помощью CSS псевдоселектора a:visited:active. Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action, порядок, в котором правила определяются в файле styles.css, имеет значение:

a:visited:active {
  color: red;
}

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button. Это позволит создавать кнопки, которые ведут куда-то.

Сначала нужно изменить кнопки, чтобы они стали элементами <a href>, а не просто элементами <div>, как показано ниже:

<a href='nowhere.html'>Кнопка Один</a>
<a href='nowhere.html'>Кнопка Два</a>

Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что <a> является встроенным элементом, а также имеет значение цвета по умолчанию:

Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

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

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Желтый */
}

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.

У нас есть один общий <div>, который обертывает контент (.page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:

<div>
  <p>If this page had a sidebar...</p>
  <p>We’d have some problems with pseudo-classes.</p>
</div>

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:

.page > p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Различные разработчики придерживаются разных «школ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента.

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

Вместо атрибута class для любого элемента HTML, используется атрибут id. Попробуйте добавить идентификатор ко второй кнопке:

<a href='nowhere.html'>Кнопка Два</a>

Соответствующий селектор CSS должен начинаться с символа хэша (#). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

#button-2 {
  color: #5D6063;  /* Dark gray */
}

Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id. Довольно скоро наш CSS начнет выглядеть довольно «грязно»:

/* (Это тяжело поддерживать) */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
  color: #5D6063;
}

По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов.

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

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

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.

Порядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом:

Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.

Данная публикация представляет собой перевод статьи «css selectors» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Селекторы атрибутов | htmlbook.ru

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

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

Простой селектор атрибута

Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }

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

В примере 13.1 показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title.

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница 
   будет корректно отображаться в одном браузере, выяснится, 
   что она неправильно показывается в другом</q>.</p>

 </body>
</html>

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

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

Атрибут со значением

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.

[атрибут=»значение»] { Описание правил стиля }
Селектор[атрибут=»значение»] { Описание правил стиля }

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

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[target="_blank"] { 
    background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Обычная ссылка</a> | 
   <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 13.2).

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.

Значение атрибута начинается с определённого текста

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

[атрибут^=»значение»] { Описание правил стиля }
Селектор[атрибут^=»значение»] { Описание правил стиля }

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href^="http://"] { 
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <p><a href="1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>

Результат примера показан ниже (рис. 13.3).

Рис. 13.3. Изменение стиля для внешних ссылок

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

Значение атрибута оканчивается определённым текстом

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

[атрибут$=»значение»] { Описание правил стиля }
Селектор[атрибут$=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
  
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — 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. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | 
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

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

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

[атрибут~=»значение»] { Описание правил стиля }
Селектор[атрибут~=»значение»] { Описание правил стиля }

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).

Пример 13.6. Стиль в зависимости от имени класса

HTML5CSS 2.1IECrOpSa 5Fx

<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Блок</title> 
  <style> 
   [class~="block"] h4 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div> 
   <h4>Заголовок</h4> 
  </div> 
 </body> 
</html>

В данном примере зелёный цвет текста применяется к селектору h4, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

[атрибут|=»значение»] { Описание правил стиля }
Селектор[атрибут|=»значение»] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Термины</h3>
   <div>
     <ul>
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }
Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

INPUT[type=»text»] { background: #acdacc; }
INPUT[type=»textinput»] { background: #acdacc; }
INPUT[type=»textfield»] { background: #acdacc; }
INPUT[type=»textarea»] { background: #acdacc; }
INPUT[type=»texts»] { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

P[class|=»text2″] { color: red; }
P[class^=»text2″] { color: red; }
P[class~=»text2″] { color: red; }
P[class*=»text2″] { color: red; }
P[class$=»text2″] { color: red; }

3. К какому элементу будет применяться следующий стиль?

[class~=»lorem»] { background: #666; }

<p>Lorem ipsum dolor sit amet</p>
<div>Lorem ipsum dolor sit amet</div>
<p>Lorem ipsum dolor sit amet</p>
<div>Lorem ipsum dolor sit amet</div>
<p><span>Lorem ipsum dolor sit amet</span></p>

Ответы

1. INPUT[type=»text»] { background: #acdacc; }

2. P[class*=»text2″] { color: red; }

3. <div>Lorem ipsum dolor sit amet</div>

htmlbook.ru

Селектор тегов css – Селекторы тегов | htmlbook.ru

Селекторы тегов | htmlbook.ru

Вопросы для проверки

Ответы

Селекторы тегов CSS — Как создать сайт

Селекторы тегов в языке CSS

Навигация по записям

Селекторы CSS

Селектор тегов

Селектор идентификатор (якорь)

Селектор классов

Групповые селекторы

Селекторы потомков

Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения

Продвинутые CSS-селекторы, о которых вы не знали

Селекторы CSS | CSS

Селекторы атрибутов | htmlbook.ru

Простой селектор атрибута

Атрибут со значением

Значение атрибута начинается с определённого текста

Значение атрибута оканчивается определённым текстом

Значение атрибута содержит указанный текст

Одно из нескольких значений атрибута

Дефис в значении атрибута

Вопросы для проверки

Ответы

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

Рубрики

Рубрики