Псевдо-классы CSS используются для добавления специальных эффектов к некоторым селекторам. Для использования этих эффектов вам не нужно использовать JavaScript или любой другой скрипт. Простой синтаксис псевдо-классов заключается в следующем:

селектор : псевдо - класс {свойство:значение}

Классы CSS также могут использоваться с псевдоклассами -

селектор.класс:псевдо-класс {свойство:значение }

Наиболее часто используемые псевдо-классы заключаются в следующем:

Свойство Описание
:linkИспользуйте этот класс, чтобы добавить специальный стиль к невидимой ссылке.
:visitedИспользуйте этот класс, чтобы добавить особый стиль к посещенной ссылке.
:hoverИспользуйте этот класс, чтобы добавить специальный стиль к элементу, когда вы наводите его на него.
:activeИспользуйте этот класс для добавления специального стиля к активному элементу.
:focusИспользуйте этот класс, чтобы добавить особый стиль к элементу, в то время как элемент имеет фокус.
:first-childИспользуйте этот класс, чтобы добавить особый стиль к элементу, который является первым потомком какого-либо другого элемента.
:langИспользуйте этот класс, чтобы указать язык для использования в указанном элементе.

При определении псевдо-классов в блоке < style> ... < / style> следует отметить следующие моменты:

  • a:hover ДОЛЖЕН быть после a:link и a:visited в определении CSS, чтобы быть эффективным.
  • a:active ДОЛЖЕН быть после a:hover в определении CSS для того, чтобы быть эффективным.
  • Имена псевдо-класса не чувствительны к регистру.
  • Псевдо-класс отличается от классов CSS, но их можно комбинировать.

Псевдо-класс :link

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

< html>
   < head>
      < style type="text/css">
         a:link {color:#000000}
      < /style>
   < /head>
   < body>
      < a href="/">Black Link< /a>
   < /body>
< /html>

Он произведет следующую черную ссылку -


Псевдо-класс :visited

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

< html>
   < head>
      < style type="text/css">
         a:visited {color: #006600}
      < /style>
   < /head>
   < body>
      < a href="/">Click this link< /a>
   < /body>
< /html>

Это приведет к следующей ссылке. Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.


Псевдо-класс : hover

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

< html>
   < head>
      < style type="text/css">
         a:hover {color: #FFCC00}
      < /style>
   < /head>
   < body>
      < a href="/">Bring Mouse Here< /a>
   < /body>
< /html>

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


Псевдо-класс :active

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

< html>
   < head>
      < style type="text/css">
         a:active {color: #FF00CC}
      < /style>
   < /head>
   < body>
      < a href="/">Click This Link< /a>
   < /body>
< /html>

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


Псевдо-класс :focus

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

< html>
   < head>
      < style type="text/css">
         a:focus {color: #0000FF}
      < /style>
   < /head>
   < body>
      < a href="/">Click this Link< /a>
   < /body>
< /html>

Он выдает следующую ссылку. Когда эта ссылка фокусируется, ее цвет меняется на оранжевый. Цвет меняется, когда он теряет фокус.


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

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

Чтобы сделать :first-child в IE < ! DOCTYPE> должна быть указана в верхней части документа.

Например, чтобы отступать первый абзац всех элементов < div >, вы можете использовать это определение -

< html>
   < head>
  
      < style type="text/css">
         div > p:first-child
         {
            text-indent: 25px;
         }
      < /style>
     
   < /head>
   < body>
  
      < div>
         < p>First paragraph in div. This paragraph will be indented< /p>
         < p>Second paragraph in div. This paragraph will not be indented< /p>
      < /div>
      < p>But it will not match the paragraph in this HTML:< /p>
     
      < div>
         < h3>Heading< /h3>
         < p>The first paragraph inside the div. This paragraph will not be effected.< /p>
      < /div>
     
   < /body>
< /html>

Это приведет к следующему результату -


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

Определение псевдо-класса :lang позволяет создавать селекторы на основе языка для определенных тегов.

Этот класс полезен в документах, которые должны обращаться к нескольким языкам, которые имеют разные соглашения для определенных языковых конструкций. Например, французский язык обычно использует угловые скобки (< and >) для целей цитаты, в то время как на английском языке используются кавычки ('and').

В документе, который должен учитывать эту разницу, вы можете использовать псевдо-класс класса :lang для правильного изменения меток кавычек. Следующий код изменяет тег < blockquote > соответствующим образом для используемого языка -

< html>
   < head>
      < style type="text/css">
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      < /style>
   < /head>
   < body>
      < p>...< q lang="fr">A quote in a paragraph< /q>...< /p>
   < /body>
< /html>

Селектора :lang будут применяться ко всем элементам документа. Однако не все элементы используют свойство quotes, поэтому эффект будет прозрачным для большинства элементов.

Это приведет к следующему результату -





Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok