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

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

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

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

При определении псевдо-классов в блоке < 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, поэтому эффект будет прозрачным для большинства элементов.

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

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