Использование селекторов псевдоклассов
9 февраля 2018 | Опубликовано в css | 12 Комментариев »
Селекторы псевдоклассов влияют на элементы в определенных состояниях, например, запись a:hover контролирует внешний вид ссылок в момент прикосновения к ним на мобильном устройстве или при наведении указателя мыши на компьютере. В отличие от селекторов псевдоэлемента, которые контролируют внешний вид части содержимого элемента, такой как первая строка или первая буква абзаца.
В таблице ниже находятся все текущие селекторы псевдоклассов в CSS, у некоторых из которых есть ссылки на дополнительную информацию:
Список селекторов псевдолассов
Селектор псевдокласса | Цель |
:link | Контролирует внешний вид непосещенных ссылок. Сильно связан с элементом ссылки, до той степени, что элемент ссылки, использованный без других псевдоселекторов перед заданием стилей, контролирует то же самое. |
:visited | Контролирует внешний вид посещенных ссылок. По соображениям безопасности существует много ограничений на применение стилей. |
:hover | Контролирует внешний вил элемента при наведении на него указателя мыши или другого указывающего устройства. Хотя он сильно связан с элементов ссылки, в CSS такая связь не указана. В современных версиях браузеров этот псевдокласс может быть применен к любому элементу, например к изображению, следующим образом: img:hover. |
:active | Контролирует внешний вид содержимого, пока пользователь нажимает на него, т. е. между моментами, когда кнопка мыши нажимается и отпускается. Используется редко, так как эффект обычно очень кратковременный. |
:first-child | Выбирает элемент первого потомка из последовательности разметки. Например, запись ul li:first-child задаст стили для первого элемента списка в любом ненумерованном списке. |
:last-child | Выбирает элемент последнего потомка из последовательности разметки. |
:nth-child(n) | Выбирает каждый элемент или элементы потомка из последовательности разметки, который соответствует (n), где n может быть словом, таким как odd (нечетный) или even (четный), числом, или математическим выражением. |
:nth-of-type(n) | Выбирает каждое n-ное появление определенного элемента. |
:focus | Задает стили ссылкам, которые были выбраны с помощью клавиатуры и выбранным элементам форм, таким как поля ввода. |
:only-child | Выбирает элемент, только если он единственный потомок родительского элемента. |
:first-of-type | Выбирает первый элемент заданного типа. |
:last-of-type | Выбирает последний элемент заданного типа. |
:only-of-type | Выбирает элемент, только если он единственный потомок заданного типа родительского элемента. |
:nth-last-child(n) | Отсчитывает назад от конца в группе потомков. |
:nth-last-of-type(n) | Отсчитывает назад от конца в группе потомков заданного типа. |
:not(S) | Соответствует элементам, которые не (S). |
:valid | Состояние элемента форм с содержимым, которое считается соответствующим определенной схеме символов и чисел. |
:invalid | Состояние элемента форм с содержимым, которое считается несоответствующим. |
:checked | Задает свойства элементам форм, которые выбраны, таким как радиокнопки и переключатели-флажки. |
Обратите внимание на то, что псевдоселекторы могут быть использованы вместе, например: a:visited:hover.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
14 ноября 2020 в 4:08
Wgp00j pills2sale.com viagra online
Ответить
17 ноября 2020 в 1:35
I'm afraid that number's ex-directory buy metronidazole cream canada InformationWeek encourages readers to engage in spirited, healthy debate, including taking us to task. However, InformationWeek moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing/SPAM. InformationWeek further reserves the right to disable the profile of any commenter participating in said activities.
Ответить
17 ноября 2020 в 2:13
What university do you go to? harga obat amlodipine 10 mg Soon after Faure gave Cuban the «confidential information» on June 28, 2004, Cuban demanded more details on the new stock offering. Did the offering, for example, include discounts for current shareholders, Cuban asked. Faure connected Cuban to an investment banker who was responsible for selling the new stock. Only 1 minute after Cuban's conversation with the investment banker, Cuban called his broker to order an immediate sale of his nearly $8 million in stock. The broker managed to sell 10,000 shares that afternoon and sold the remaining shares the next day at an average price of $13.29 per share.
Ответить
17 ноября 2020 в 4:13
Please wait vigora tablet for female in hindi ** JSW Steel, India's third-largest steelmaker,has expressed interest in buying British steel trader Stemcor'sIndian iron ore assets, joining at least three other interestedparties, two sources at the companies said.
Ответить
17 ноября 2020 в 4:54
My battery's about to run out viagra product reviews "In the event of a large earthquake, oftentimes it's not just one break in the ground, it's spread out over some distance, " Catchings said. "You'd kind of like to know where all these things are if you really want to understand the hazard. "
Ответить
17 ноября 2020 в 6:04
I've just started at cialis dosage 5mg or 10mg Microsoft's plan to «win in this devices and services era» suggests that the firm may not be only going after Sony's PlayStation 4 with its upcoming Xbox One, but other rival platforms and services, too.
Ответить
17 ноября 2020 в 15:24
What university do you go to? cataflam pro aerosol com 85 ml "By coming so close Greenpeace could have damaged the base of the platform. When they threw up their equipment they could easily have hit somebody. Or they might have ruptured one of the pressurised pipes and caused a diesel spill. "
Ответить
18 ноября 2020 в 0:50
Gloomy tales ultherapy before and after stomach His staff are not too concerned about the extra day-to-daydemands of ECB supervision. Two sources familiar with thesituation told Reuters that German supervisor Baffin was alreadyholding a daily liquidity call with HASH.
Ответить
18 ноября 2020 в 6:26
I need to charge up my phone cursos financiados iefp 2019 coimbra A 2007 study found that when healthy participants were deprived of sleep, they had greater brain activity after viewing upsetting images than their well-rested counterparts, which is similar to the reaction that depressed patients have, noted one of the study authors.
Ответить
18 ноября 2020 в 8:02
We went to university together bimatoprost ophthalmic solution 0.03 buy canada "If you look at past years there has been a narrowing of thegap by this stage in the negotiations and we have not seen thatyet, " said Charmane Russell, a spokeswoman for the goldproducers which include AngloGold Ashanti, Gold Fields, Harmony and Sibanye Gold.
Ответить
18 ноября 2020 в 11:56
What line of work are you in? clomiphene cycle bodybuilding In terms of the effects of female genital mutilation on women you find that depending on the more serious form you would have issues to deal with; menstruation, urination but also sexual intercourse. But more importantly what we don't tend to seem to be addressing is the mental health-related issues and trauma associated. People talk about the short-term and the long-term consequences of female genital mutilation but the reality is that there are some people who would tell you that they do not have any health-related problems, and others who would have a lot of severe problems. In the UK we are finding that type one and type two tend to have a lot more psychosexual problems.
Ответить
24 ноября 2020 в 23:32
tHpMhG wcytpoahkvkc, [url=http://ybepxnntuljf.com/]ybepxnntuljf[/url], [link=http://iizwqmefrhoi.com/]iizwqmefrhoi[/link], mimpzufjjhqb.com
Ответить