Объединение селекторов §

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

.class1.class2 { }

Стили будут применяться ко всем элементам, которые одновременно имеют класс class1 и class2. Например:

<div class="class1 class2">Блок с двумя классами</div>

Псевдоклассы §

Псевдоклассы - это селекторы, которые определяют состояние уже существующих элементов, которые могут меняться при определенных условиях.

Псевдокласс :not §

Псевдокласс :#not (селектор) является отрицающим селектором. С его помощью можно выбрать элементы, которые НЕ содержат указанный селектор:

li:not(:last-child) { }

Этот селектор выберет все теги li, НЕ являющиеся последними в их родителе.

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать двойной псевдокласс :not, то есть конструкция :not(:not(…)) не сработает.

Также в комбинации с :not не применяются:

1. объединение селекторов: например, li:not(.heart.jack) — некорректный селектор;
2. псевдоэлементы: li:not(::after) — неправильная запись;
3. селекторы-потомки, групповые селекторы или комбинации: например, нельзя писать li:not(a span) или li:not(a + span).

Селектор :not можно комбинировать с другими.

Псевдокласс :nth-last-child §

Псевдокласс :#nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child, отсчет ведется не от первого элемента, а от последнего.

Псевдоклассы :first-of-type и :last-of-type §

Псевдокласс :#first-of-type выбирает первый дочерний элемент родителя с учетом тега элементов.

Псевдокласс :#last-of-type выбирает последний дочерний элемент родителя с учетом тега.

Пример записи:

ul:last-of-type {
  ...
}

Псевдоклассы :nth-of-type и :nth-last-of-type §

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

Псевдокласс :#nth-last-of-type также выбирает элементы по их расположению, учитывая их тег, но отсчет ведется от конца.

Селектор последующих элементов §

Селектор селектор1 ~ селектор2 применяет стили к элементу, подходящему под селектор2, только если перед ним расположен элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

Между элементами селектор1 и селектор2 могут находиться другие элементы.

Псевдокласс :empty §

Псевдокласс :#empty, выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов).

Псевдокласс :only-child §

Псевдокласс :#only-child используется, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом внутри родительского контейнера.

Псевдоклас :only-of-type §

Псевдокласс :#only-of-type используется, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом указанного типа внутри родительского контейнера.

Псевдоклассы состояний :hover, :focus, :active, :visited §

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход.

Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

.selector{  
  &:hover,  
  &:focus,  
  &:active
 &:visited
 {  
    ...  
  }  
}

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Давайте начнём с :hover.

Стилизация наведения (:hover) §

:#hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

button{  background-color: #dedede;  
} button:hover{  background-color: #aaa;  
}

Стилизация фокуса (:focus) §

:#focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

1. при выборе элемента кнопкой «Tab»
2. при щелчке на элемент мышью

К фокусным элементам относятся:

1. Ссылки (a)
2. Кнопки (button)
3. Элементы формы (input, textarea и т.д)
4. Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex=“-1”, но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов button
3. При клике на ссылку a, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

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

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

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

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение color

Поскольку изменение свойств background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье ”Creating a custom focus style“.

button{  background-color: #dedede;  
} button:hover{  background-color: #aaa;  
} button:focus{  outline: none;  box-shadow: 0003pxlightskyblue;  
}

Стилизация активного состояния (:active) §

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

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

1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
2. Удержание кнопки пробела (на кнопках)

button:active{  background-color: #333;  border-color: #333;  color: #eee;  
}

Две особенности, которые следует принять к сведению:

1. Удержание пробела вызывает состояние :active у кнопок (button), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию §

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus §

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок: §

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на body

Для кнопок: §

1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот#JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).

document.addEventListener('click', event => {  if(event.target.matches('button')) {  
    event.target.focus()  
  }  
})

Добавление этого кода изменит поведение нажатия кнопок на следующее:

1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода §

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация §

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

.element:hover,
.element:active{  /* Изменить цвет фона/текста  /} .element:focus{  / Показать обводку */}

Для пользователей мыши:

1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!

1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

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

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover{  /* Изменить цвет фона/текста  */} .element:active{  /* Иные изменения в цвете фона и текста */} .element:focus{  /* Показать обводку */}

Поведение кнопки в Safari, если были стилизованы все три состояния