Hover after css: Сочетание с псевдоклассами | WebReference

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

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

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

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

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

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
   
2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
   
3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т. п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

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

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

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

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет.

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

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

p:first-letter {font-size:5em; float:left; color:red}

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

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo. ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

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

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Почему :hover:after действительно, но не :after:hover? Селекторы псевдоклассов CSS и псевдоэлементов

На днях я попытался добавить стиль подчеркивания к элементу при наведении, и это не сработало. Я не осознавал, что стилизую псевдоэлемент, созданный :after . Я предпочел вариант с одним двоеточием :после . Он так же действителен, как ::после , жизнь коротка, а я ленивый разработчик. Мой :after:hover не работал, и я расстроился.

Устранение неполадок заставило меня задуматься, могу ли я объединить другие псевдоэлементы, такие как ::first-letter и ::first-line ? А если нет, то почему? И почему оба :after и :after в любом случае законны?

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

Почему :after Valid CSS?

Во-первых, давайте пробежимся по истории CSS. Впервые я изучил CSS в начале 2010-х, когда CSS 2.1 был «Стандартом», а одиночные двоеточия бродили по земле. В то время как в CSS 1 были указаны селекторы псевдоклассов, такие как :link и :visited , в CSS 2 были введены псевдоэлементы, такие как :before и :after .

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

Синтаксис с двумя двоеточиями для псевдоэлементов был введен в CSS Selector 3. Из-за принципа совместимости в Интернете селекторы псевдоэлементов из CSS 2.1, включая :после , :до , :first-line и : первая буква — действительны и сегодня. Однако новые псевдоэлементы, такие как ::selection , не имеют соответствующей версии с одним двоеточием — убедитесь сами, выбрав каждую строку в приведенном ниже примере:

См. перо Без названия Шимин Чжан (@shimin-zhang) на КодПене.

Разница между псевдоклассом и псевдоэлементом

Псевдокласс и псевдоэлемент — это селекторы CSS, которые имеют доступ к информации за пределами того, что предоставляет HTML DOM — отсюда и префикс «псевдо». Возьмите селектор

Хотя псевдоэлементы воздействуют на DOM-подобный объект, они создают чистую конструкцию CSS и фактически не влияют на DOM. У них также есть дополнительное двоеточие для обозначения этой разницы. Тот факт, что ::after элемент не является фактическим узлом DOM, имеет последствия для доступности, их содержимое не существует для программ чтения с экрана и должно быть только декоративным.

Читатели думают: «А как насчет :disabled и :nth-child() ?» — ты поймал меня. Предыдущие два абзаца не совсем верны, некоторые селекторы псевдоклассов являются скорее «трюками» или «ярлыками» — я бы хотел, чтобы W3C создал для них новое имя, чтобы сделать различие четким.

Повторим, концептуальное различие между ними заключается в том, что селекторы псевдоклассов воздействуют на существующий элемент DOM, используя некоторую внешнюю информацию, в то время как псевдоэлемент создает новый, «на самом деле не существующий» элемент только для механизма рендеринга. 9Псевдоселектор 0003 :visited можно использовать только для выбора существующих элементов привязки. В то время как ::first-line создают элементы, которые иначе не могут существовать с данной структурой DOM — отсюда и название.

Вот пример: псевдоэлемент ::first-line создается путем разделения второго элемента на два, чтобы изменить цвет только его первого слова.

См. перо Без названия Шимин Чжан (@shimin-zhang) на КодПене.

Как комбинировать псевдоклассы с псевдоэлементами

Что знание разницы между псевдоклассами и псевдоэлементами говорит нам об их использовании?

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

С другой стороны, селекторы псевдоэлементов нельзя использовать взаимозаменяемо с селектором элемента . Вы не можете связать их. Псевдоэлементы не являются реальными элементами — они не могут быть целью селектора. p::first-line::first-letter недействителен, потому что ::first-line не является реальным элементом DOM. Используйте псевдоэлементы только в конце строки селектора.

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

Та же логика применяется при объединении селекторов псевдокласса и псевдоэлемента. Псевдокласс приводит к элементам DOM, поэтому можно добавлять псевдоэлементы — почему p:hover:after является допустимым CSS. Меняем порядок, и мы применяем псевдокласс к несуществующему элементу — почему p:after:hover недействителен.

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

Вот несколько правил, которые следует помнить, когда в следующий раз вам придется использовать псевдоселекторы:

Правило 1: Псевдоклассы могут использоваться как настоящие селекторы .class и использоваться свободно. p:hover.class работает.

Правило 2: Псевдоэлементы всегда должны быть в самом конце вашего селектора, они не могут быть объединены в цепочку, потому что они не выбирают настоящие элементы DOM.

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

Перед тем, как я уйду, вот Code Pen с некоторыми примерами псевдоклассов и псевдоэлементов. Используйте его, чтобы проверить свои знания. Прочитайте CSS для каждого div и посмотрите, соответствует ли его поведение вашим ожиданиям!

Если вам понравился этот пост, вам также может быть интересно узнать, как создавать API-интерфейсы стилей с помощью пользовательских свойств CSS или когда вам следует использовать единицу CSS px в 2022 году.

CSS: псевдокласс hover

❮ Пред. Следующий ❯

Псевдокласс :hover выбирает и стилизует зависший элемент. Он покрывается пользователем.

Элементы наводятся, когда пользователь наводит указатель мыши на элемент. Он не активирует указывающее устройство.

Псевдоклассы :link, :active или :visited переопределяют стиль, определенный псевдоклассом :hover.

Многие сенсорные устройства не поддерживают :hover, потому что у него есть проблемы с сопоставлением.

Селекторы уровня 3

Селекторы уровня 4

 :hover {
  css объявления;
} 

Пример псевдокласса :hover:

 

  <голова>
    
    <стиль>
      а: наведите {
        цвет фона: #8ebf42;
        цвет: #666;
      }
    
  
  <тело>
     
:пример селектора при наведении
 
    W3docs.com
  
 

Попробуй сам »

Наведите указатель мыши на ссылки, чтобы увидеть, как меняется цвет.

Пример псевдокласса :hover с тегом

 

  <голова>
    
    <стиль>
      а {
        цвет: #1c87c9;
      }
      а: наведите {
        цвет фона: #8ebf42;
        цвет: #еее;
      }
    
  
  <тело>
     
:пример селектора при наведении
 
    
Lorem Ipsum — это просто фиктивный текст для полиграфии и набора.  Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки из Lorem Ipsum, а совсем недавно — с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum.
  
 

Попробуй сам »

Пример псевдокласса :hover с тегом

  <голова> <стиль> дел {
 отступ: 30 пикселей;
 цвет фона: #8ebf42;
 цвет: #еее;
 }
 раздел:наведите {
 цвет фона: #666;
 цвет: #fff;
 }   <тело>
:пример селектора при наведении
 <дел> Lorem ipsum - просто фиктивный текст.