Присвоение класса элементу
Классы указывают признак для элементов. Используйте атрибут , чтобы назначить класс элементу.
Чтобы назначить несколько классов элементу разделите имена классов пробелами.
Классы могут использоваться для стилизации определенных элементов без изменения всех элементов данного типа. Например, эти два элемента могут иметь совершенно разные стили:
Множество элементов могут иметь одинаковые классы и все они получат стиль, связанный с этим классом. Это всегда будет верно, если внутри CSS вы не укажете элемент.
Например, у нас есть два элемента: оба с классом highlight:
Если ваш стиль такой, как показано ниже, то оба элемента будут содержать зеленый текст:
Однако, если мы хотим только чтобы класс работал только внутри div, мы можем добавить конкретики, как показано ниже:
Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight), а не элементы с классами (например, div.highlight).
Как и любой другой селектор, классы могут быть вложенными:
Вы также можете связать селектор классов только с элементами, имеющими определенную комбинацию из нескольких классов. Например, если это наш HTML:
И мы хотим покрасить текст этого элемента в розовый цвет, то можем написать в CSS следующее:
Селекторы атрибутов
Мне очень нравятся селекторы атрибутов. Они довольно гибки, когда вам надо выбрать элементы, включающие в себя атрибуты с конкретными значениями.
Этот пример демонстрирует выборку всех чекбоксов в инпуте и применение стилей к их ассоциированным лейблам, сделав их жирными и синими.
Затем мы переписываем стиль для чекбокса с именем и цвет его лейбла становится красным
Обратите внимание как другие лейблы не подвергаются стилизации
Селекторы атрибутов, а не только вообще для форм, могут выбирать любые атрибуты на любом элементе. И вы можете выбрать любой атрибут, а не только те которые официально поддерживаются. Более того, вы можете просто проверить наличие атрибута, как написано дальше:
Он выбирает элементы , которые содержат атрибут icon. Он выберет атрибут в не зависимости пустой или и имеет какие-то значения. Вот несколько примеров:
Первая ссылка не имеет атрибута , так что её не выбираем
Следующие две ссылки выбираются, так как у них есть пустой атрибут target или один со значением, это не важно. И под конец, последняя ссылка становится розовой, так как выбирается из-за наличия атрибута
Её значение нерелевантно и просто должно быть само по себе, чтобы селектор его выбрал.
Практический пример этого мог бы быть в подсвечивании изображений, которые не имеют атрибута . Этот атрибут требуется для доступности, так что он важен в целях SEO, так что вам нужно убедиться в том, что все изображения его имеют. Мы можем использовать следующее правило, чтобы это сделать:
Если вы хотите выбрать конкретную группу атрибутов, то для вас на этот случай есть группа очень полезных селекторов:
Атрибуты, которые начинаются со значения val.
Атрибуты, которые начинаются со значения val или он первый в списке, разделенном тире.
— Значение появляется везде в атрибуте.
— Значение является одним из разделенным пробелом.
Первые два примера очень схожи, кроме , который также выбирает значения разделенные тире. Именно это может быть полезно для выбора языковых атрибутов. Как пример .
Выбор расширений файлов становится очень простым с , а в купе с вы можете легко показать совпавшие файлы. Не используя и конкатенацию для совмещения их со строкой.
Со значением вы можете показать любой домен, не зависимо от того, какой протокол он использует или какой субдомен у него.
И на последок, у нас есть , который отлично подходит для выбора значений в атрибутах, состоящих их списка значений, разделенных пробелами. Он выбирает только целое слово, а не фрагмент, как оператор, так что много множества слов выбраны не будут.
Все примеры селекторов атрибутов выше являются чувствительными к регистру. Но у нас у всех есть трюк в рукаве. Если мы добавим i, перед закрывающей скобкой, то мы сможем выключить чувствительность к реестру при выборке.
Большинство основных браузеров поддерживает выборку чувствительную к регистру, кроме Internet Explorer и Microsoft Edge.
Селекторы пользовательского интерфейса
Если вы работали над стилизацией форм, то вы без сомнений встречали эти типы псевдо-классов:
Для примера, мы можем использовать для стилизации простого to-do списка.
Это довольно стандартно, но к нашему распоряжению есть другие интересные псевдо классы.
выбирает один или более элементов, которые дефолтны в группе связанных элементов. Это может быть удачно скомбинировано с кнопкой reset:
Мы можем использовать псевдо классы для выбора значений ввода, верны они или нет. А так же не напрямую для CSS, в таких случаях как выбор любых требуемых элементов, перед тем как форма будет отправлена.
Если вы начнете писать в форму ввода адреса электронной почты, то потом оно должно стать валидным. Однако, форма ввода рабочего адреса всегда нужна и должна быть валидной, так что мы не можем оставить её пустой
Обратите внимание на то, как мы можем связывать псевдо-классы (), чтобы достигнуть того, что нам нужно
Далее у нас есть два псевдо класса, которые могут подходить, если элемент формы (который поддерживает атрибуты min и max) находится в нужном диапазоне или нет.
И снова, мы можем использовать кнопку с типом , чтобы сбросить все до дефолтных значений чисел элемента ввода.
Завершая эту секцию, давайте взглянем на , и .
Используя их вы сможете легко выбрать элементы, которые только для чтения или редактируемые. Таким элементам не обязательно быть только полями формы ввода, как и продемонстрировано на примере выше.
И под конец, , который выберет элементы с которыми не взаимодействовали и будет до сих пор показываться текст дефолтного плейсхолдера. Этот селектор должен использоваться очень аккуратно, так как он пока широко не распространен.
Селектор типа
Рис. 3а Селектор типа в CSS.
В предыдущих примерах, да и в практическом задании предыдущей статьи «Создание первой таблицы стилей» мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:
- p — сообщает браузеру, что необходимо отформатировать все HTML теги <p> (параграф).
- table — сообщает браузеру, что необходимо отформатировать все HTML теги <table> (таблица).
- li — сообщает браузеру, что необходимо отформатировать все HTML теги <li> (элемент списка).
Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (<h2>):
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Селектор типа</title>
<style>
h2 {
font-family: Arial; /* задаем тип шрифта Arial */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
<h2>Обычный заголовок второго уровня</h2>
<h2>Обычный заголовок второго уровня</h2>
<h2>Обычный заголовок второго уровня</h2>
</body>
</html>
Результат нашего примера:
Рис. 3б Пример использования селектора типа.
Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы
CSS Свойства
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Универсальный селектор
Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).
Давайте рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Универсальный селектор</title>
<style>
* { /* выбираем все элементы внутри документа */
color: rgb(50,100,150); /* задаем цвет текста в формате rgb */
font-style: italic; /* задаем стиль шрифта - курсивное начертание */
}
</style>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<p>Абзац, который не несет никакой смысловой нагрузки</p>
</body>
</html>
В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.
Результат нашего примера:
Рис. 7в Пример использования универсального селектора.
Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.
.test * { /* выбирает все элементы внутри элемента c назначенным классом test */
объявление;
}
#test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление;
}
div * { /* выбирает все элементы внутри элемента <div> */
объявление;
}
Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».
Почему простая запятая упрощает кодирование
CSS, или каскадные таблицы стилей, являются общепринятым в индустрии веб-дизайна способом добавления визуальных стилей на сайт. С помощью CSS вы можете контролировать макет страницы, цвета, типографику, фоновое изображение и многое другое. По сути, если это визуальный стиль, то CSS – это способ перенести эти стили на ваш сайт.
Добавляя стили CSS в документ, вы можете заметить, что документ начинает становиться все длиннее и длиннее. Даже небольшой сайт, содержащий всего несколько страниц, может получить значительный CSS-файл, а очень большой сайт с большим и большим количеством страниц уникального контента может иметь очень большие CSS-файлы. Это усугубляется адаптивными сайтами, которые содержат множество медиа-запросов, включенных в таблицы стилей, чтобы изменить внешний вид визуальных элементов и расположение страницы на разных экранах.
Да, CSS-файлы могут быть длинными. Это не является серьезной проблемой, когда речь идет о производительности сайта и скорости загрузки, потому что даже длинный CSS-файл, вероятно, будет довольно маленьким (поскольку на самом деле это просто текстовый документ). Тем не менее, каждый бит имеет значение, когда дело доходит до скорости страницы, поэтому, если вы можете сделать свою таблицу стилей более тонкой, это хорошая идея. Вот где «запятая» может оказаться очень полезной в вашей таблице стилей!
Запятые и CSS
Вы, возможно, задавались вопросом, какую роль играет запятая в синтаксисе селектора CSS. Как и в предложениях, запятая вносит ясность, а не код, в разделители. Запятая в селекторе CSS разделяет несколько селекторов в пределах одного и того же стиля.
Например, давайте посмотрим на некоторые CSS ниже.
th {color: red; } td {color: red; } p.red {color: red; } div # firstred {color: red; }
С этим синтаксисом вы говорите, что хотите, чтобы теги th , теги td , теги абзаца с красным классом и тег div с идентификатором firstred all имели стиль красный цвет.
Это вполне приемлемый CSS, но есть два существенных недостатка при написании этого:
- В будущем, если вы решите изменить цвет шрифта этих свойств на синий, вы должны будете сделать это изменение четыре раза в своей таблице стилей.
- Он добавляет много дополнительных символов в вашу таблицу стилей, которые вам не нужны. Эти 4 стиля могут не показаться излишними, но если вы продолжите делать это для всей таблицы стилей, строки будут складываться, и эта таблица будет намного, намного больше, чем нужно.
Чтобы избежать этих недостатков и упростить ваш CSS-файл, мы попробуем использовать запятые.
Использование запятых для разделения селекторов
Вместо того, чтобы писать 4 отдельных селектора CSS и 4 правила, вы можете объединить все эти стили в одно свойство правила, разделяя отдельные селекторы запятой. Вот как это будет сделано:
th, td, p.red, div # firstred {color: red; }
Символ запятой в основном действует как слово «и» внутри селектора. Так что это относится к тэгам h И тэгам td И тэгам абзаца с красным классом И тэгу div с идентификатором firstred. Это именно то, что у нас было раньше, но вместо 4-х CSS-правил у нас есть одно правило с несколькими селекторами. Это то, что делает запятая в селекторе, это позволяет нам иметь несколько селекторов в одном правиле.
Этот подход не только делает более компактные и чистые файлы CSS, он также значительно облегчает будущие обновления. Теперь, если вы хотите изменить цвет с красного на синий, вам нужно будет сделать это только в одном месте, а не в оригинальных 4 правилах стиля, которые у нас были! Подумайте об экономии времени по всему файлу CSS, и вы увидите, как это сэкономит вам время и пространство в долгосрочной перспективе!
Синтаксическая вариация
Некоторые люди предпочитают делать CSS более разборчивым, разделяя каждый селектор на отдельной строке, вместо того, чтобы писать все в одной строке, как указано выше. Вот как это будет сделано:
th, td, p.red, div # firstred { цвет: красный; }
Обратите внимание, что вы ставите запятую после каждого селектора и затем используете «ввод», чтобы разбить следующий селектор на его собственную строку. Вы НЕ добавляете запятую после последнего селектора.. Используя запятые между селекторами, вы создаете более компактную таблицу стилей, которую легче обновлять в будущем, и которую легче читать сегодня!
Используя запятые между селекторами, вы создаете более компактную таблицу стилей, которую легче обновлять в будущем, и которую легче читать сегодня!
Оригинальная статья Дженнифер Крынин.
ПравилаСкопировать ссылку
Возвращаясь к Page Speed, давайте рассмотрим :
- Избегайте селектора по потомку: ;
- Избегайте селектора по дочернему элементу: и селектора по следующему элементу: .
Конечно, селекторы по ID — самые быстрые. Проверить применимость селектора к рассматриваемому элементу можно очень быстро. Есть у него этот ID или нет? Селекторы по классу практически такие же быстрые, так как нет никаких связанных элементов, которые надо проверять.
Селекторы по потомкам, такие как — более ресурсоемкие, так как, чтобы определить надо ли применять правило к , браузер должен найти . Cелектор по дочернему элементу, например, , лучше селектора по потомку, так как браузер должен проверить только один элемент вместо множества. (К сожалению, селекторы и не поддерживаются IE6. Так что если его поддержка актуальна для вас, то про них придется забыть — прим. переводчика).
Class Селекторы
Селекторы класса могут использоваться для выбора группы HTML-элементов, которые имеют одинаковый класс. Все элементы, имеющие этот класс, будут отформатированы в соответствии с заданным правилом.
Селектор класса определяется знаком точки (), за которым сразу следует значение класса.
Приведенные выше правила стиля отображают текст синим цветом для всех элементов в документе, у которых атрибут установлен . Вместе с классом вы можете указывать и тип элемента, для того, чтобы сделать правило более конкретным. Например:
Правило стиля внутри селектора отображает текст синим цветом только тех элементов , у которых атрибут установлен , и не влияет на другие абзацы, не имеющие этого класса.
Селекторы: подводные камни
Селекторы по ID
Все селекторы в CSS имеют свой вес, например, селектор по классу весит больше, чем селектор по тегу. Это означает, что если два блока стилей перекрывают друг друга, выиграет тот, у кого тяжелее селектор
Подробнее об этом можно почитать тут.
Селектор по ID — самый тяжелый из всех, а это означает, что если вы задали стили по ID (например, ), переопределить их будет довольно сложно: для этого потребуется или ещё один селектор с ID.
При дальнейшем развитии такого кода проблемы специфичности селекторов буду возникать постоянно, такой код будет очень трудно поддерживать, поэтому постарайтесь не использовать для стилизации селекторы по ID.
Составные селекторы
Такие селекторы следует использовать с осторожностью. Во-первых, по причине специфичности: например, чтобы перебить селектор из двух классов, вам так же придется использовать селектор как минимум из двух классов или .
Во-вторых, понять к чему применится селектор из двух и более частей без подглядывания в разметку может быть затруднительно, а переходы между файлами занимают время и замедляют процесс вёрстки.
Например, сравните: и
У второго селектора ниже специфичность, сразу понятно что это за элемент, а кроме того, стили применятся только к элементам с таким классом, не затрагивая все прочие спаны, которые есть там сейчас, и которые могут появиться там в будущем.
Пример может показаться несколько синтетическим, и на простых страницах он не вызовет особых проблем, но в крупных проектах блоки страницы могут иметь очень развесистую структуру, и там сложные селекторы могут оказаться легким способом выстрелить себе в ногу.
Проблему составных селекторов хорошо решает методология именования классов по БЭМ. При её грамотном использовании представление о разметке можно получить не выходя из CSS, а необходимость использовать сложные селекторы возникает крайне редко.
Код с простыми селекторами удобнее читать и приятнее поддерживать, постарайтесь сохранять ваш код простым и легко читаемым.
и
С этими и подобными селекторами очень интересно играться, но в долгоживущих проектах их лучше не использовать из-за проблем с читабельностью: не заглядывая в код не всегда можно понять куда целится селектор. Если таких селекторов в коде много, придётся каждый раз выяснять куда целится каждый из них.
Использование таких селекторов вместо классов выглядит заманчивой идеей, но развивать и поддерживать такой код может быть неудобно. Лучше использовать БЭМ-классы с модификаторами.
Исключением могут быть совсем простые случаи, когда надо, например, покрасить строки таблицы через одну. Это удобно делать с помощью .
Псевдоклассы для структуры
Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс 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. Это дает нам четкое разделение контента от представления.
Селектор :root
Селектор :root применяет свойства ко всем HTML-элементам. Вы можете использовать :root, чтобы установить значения CSS по умолчанию для всего документа.
Селектор :root также часто используется для глобального хранения CSS-переменных. Создайте CSS-переменную с именем —red-color и присвойте ей значение цвета red. Учтите, что все имена переменных CSS должны начинаться с двойного дефиса:
Теперь вы можете использовать CSS-переменную —red-color в качестве значения в стандартных селекторах CSS:
Селектор (*) выполняет те же функции (см. выше). Единственное отличие состоит в том, что селектор * нацелен абсолютно на все элементы в документе, а :root только на контейнер документа без его дочерних элементов.
Часть 2. Селекторы атрибутов
Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Селектор наличия атрибута
Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках () в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.
E { .... }
{ .... }
В первом случаи стиль применяется к тегу в которых определён атрибут . Во втором случаи,стиль применяется ко всем тегам, внутри которых добавлен указанный атрибут.
p {
font-weight: 600;
}
В теге данного абзаца задан пользовательский атрибут
В теге данного абзаца задан пользовательский атрибут НО он ПУСТОЙ
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.
E { .... }
{ .... }
Для идентификации элемента с определённым и точно заданным значением может быть использован тот же селектор что и раньше, однако на этот раз внутри квадратных скобок после имени атрибута включают желаемое значение. Внутри квадратных скобок должно быть имя атрибута, далее знак равно (), а потом кавычек, где и пишется желаемое значение атрибута.
a[href="https://yandex.ru"] {
background-color: yellow;
}
- Яндекс
Значение атрибута содержит указанный текст
Когда мы пытаемся найти элемент на основе части значения атрибута, для не точного совпадения, может быть использован символ звёздочки () в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.
E { .... }
{ .... }
При этом мы можем точно и не знать, в каком месте значения части текста атрибута находится — в начале, середине или конце.
a {
font-weight: 600;
}
Значение атрибута начинается с определённого текста
В дополнение к выбору элемента на основе того, что значение атрибута содержит указанный текст, можно также выбрать элемент, основанный на том, с чего начинается значение атрибута. Использование символа циркумфлекса () в квадратных скобках селектора между именем атрибута и знаком равенства означает, что значение атрибута должно начинаться с указанного текста.
E { .... }
{ .... }
a[href^="https://"] {
color: green;
}
Значение атрибута оканчивается определённым текстом
Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа применяется знак доллара () в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.
E { .... }
{ .... }
Таким способом можно автоматически разделять стиль для ссылок на сайты домена и для ссылок на сайты других доменов вроде .
a {
background: url(images/ru.png) no-repeat 0 6px;;
padding-left: 12px;
}
Стилевые свойства будут применяться только для тех ссылок, атрибут которых оканчивается на «.ru». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
E { .... }
{ .... }
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом.
a { .... }
<a href="" class="tag nofollow"> .... </a>
Заключение
В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.
Пожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки!
Вадим Дворниковавтор-переводчик статьи «css selectors»
