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

Оцените материал
(0 голосов)

В дополнение к css селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.

Список доступных псевдоклассов:

  • :root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>

  • :link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход

  • :visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил

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

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

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

  • :not: позволяет исключить элементы из списка элементов, к которым применяется стиль

  • :lang: стилизует элементы на основании значения атрибута lang

  • :empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            a:link    {color:blue; text-decoration:none}
            a:visited {color:pink; text-decoration:none}
            a:hover   {color:red; text-decoration:underline}
            a:active  {color:yellow; text-decoration:underline}
            input:hover {border:2px solid red;}
        </style>
    </head>
    <body>
        <a href="/index.html">Учебник по CSS3</a>
        <input type="text" />
    </body>
</html>

Просмотреть  пример

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            a:not(.blueLink) { color: red; }
        </style>
    </head>
    <body>
        <a>Первая ссылка</a><br/>
        <a class="blueLink">Вторая ссылка</a><br/>
        <a>Третья ссылка</a>
    </body>
</html>

Просмотреть  пример

Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс "blueLink". В скобки псевдоклассу not передается селектор элементов, которые надо исключить.

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута lang:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :lang(ru) {
                color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <p lang="ru-RU">Я изучаю CSS3</p>
            <p lang="en-US">I study CSS3</p>
            <p lang="de-DE">Ich lerne CSS3</p>
        </form>
    </body>
</html>

Просмотреть  пример

Прочитано 580 раз Последнее изменение Пятница, 26 августа 2016 18:13
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+