Главная css Псевдоклассы. Стилизация ссылок

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

Псевдокласс - это специфическая характеристика элемента, которая создается с помощью CSS.

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

Синтаксис: 
селектор:псевдокласс  /*одинарное двоеточие*/
 {CSS свойство: значение; ...
 }

 Пробела между селектором и псевдоклассом нет.
 Псевдокласс начинается с двоеточия  :

В CSS существует более тридцати псевдоклассов.

Наиболее распространенные псевдоклассы: :link :visited :hover :active :focus :first-child :nth-child

Стилизация ссылок

В оформлении вида гиперссылок важна последовательность!
  1. a:link - стиль не посещенной ссылки
  2. a:visited - стиль для посещенной ссылки
  3. a:hover - ссылка над которой находится мышь (указывать последним)
  4. a:active - активизированная ссылка
1 
<style>
  a:link {color: blue; text-decoration: none;} /*голубой, без подчеркивания*/
      /* или a{color: blue; text-decoration: none;}*/
      /* можно  не указывать псевдокласс :link  */
  a:hover {color: red; text-decoration: underline;} /*красный, подчеркнутый*/
  a:hover.klas1  {background-color: yellow;} /*желтый*/
  p.text:active {background-color: aqua;}    /*морской*/
</style>

1) <a href="#">перейти на верх страницы</a>
2) <a class="klas1" href="#">ссылка с классом klas1</a>
3) <p class="text">Абзац с классом text</p>
Результат Примера 1
1) перейти на верх страницы
2) ссылка с классом klas1
3) Абзац с классом text (нажми правую кнопку мыши)

 

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

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

2 
<style>
  table {border-collapse: collapse;
  }
  th,
  td {padding: 0 3px;
      border: 1px solid #000;
  }
  tr:hover {background-color:LightGray;
  }
<style>

<table>
  <tr>
    <th>символ</th>
    <th>html-код</th>
    <th>десятичный код</th>
  </tr>
  <tr><td>неразрывный пробел</td><td>&nbsp;</td><td>&#160;</td></tr>
  <tr><td>пробел шириной в букву n</td><td>&ensp;</td><td>&#8194;</td></tr>
  <tr><td>пробел шириной в букву m</td><td>&emsp;</td><td>&#8195;</td></tr>
  <tr><td>тире шириной в букву n</td><td>&ndash;</td><td>&#8211;</td></tr>
  <tr><td>тире шириной в букву m</td><td>&mdash;</td><td>&#8212;</td></tr>
</table>

Результат Примера 2
(При наведении мышки на строку таблицы, строка меняет цвет.)

Символ

 html-код десятичный код
неразрывный пробел&nbsp;&#160;
пробел шириной в букву n&ensp;&#8194;
пробел шириной в букву m&emsp;&#8195;
тире шириной в букву n&ndash;&#8211;
тире шириной в букву m&mdash;&#8212;

 

Примеры Таблиц и псевдокласс :hover

Изменение цвета ячеек Таблицы
2-2
2-3 
<style>
  table.22, table.23 {border-collapse: collapse;
  }
  table.22 td, table.23 td {padding: 0 3px;
  border: 1px solid #000;
  }
  table.22 td:hover {background-color:teal; color:#fff;}
  table.24 td:hover {background-color:gray; color:#fff;}
  table.23 tr:hover {background-color:red; color:#fff;}
<style>

2-2
<table class="22">
  <tr><td colspan=3>Шапка Таблицы</td></tr>
  <tr><td>стр. 1</td><td>11</td><td>12</td></tr>
  <tr><td>стр. 2</td><td>21</td><td>22</td></tr>
</table>

2-3
<table class="23">
  <tr><td colspan=3>Шапка Таблицы</td></tr>
  <tr class=22><td>стр. 1</td><td>11</td><td>12</td></tr>
  <tr class=24><td>стр. 2</td><td>21</td><td>22</td></tr>
</table>
Результат примера
Реэультат
2-2
Изменение цвета ячейки при неведении
Шапка Таблицы
стр. 11112
стр. 22122

 

Реэультат
2-3
Одновременное изменение цвета строки
и цвета ячейки при неведении
Шапка Таблицы
стр. 11112
стр. 22122

 

Пример 3
"Всплывающая подсказка при наведении"

3
(Всплывающая подсказка при наведении) 
<style>
  .help {position:relative;}
  .help span {display:none;}
  .help:hover {text-decoration:underline; cursor: help;}
    
  .help:hover span {
    display:block;
    position:absolute;
    width:400px;
    top:25px; left:20px;
    background-color:#e6ffe6;
    border:1px solid green;
    padding:5px;
    font-size:14px;
    color:#333333;
    text-decoration:none;
    font-family: Arial sans-serif;
    }
</style>

Стили <a class="help" href="#"><span>CSS («каскадные таблицы стилей») — формальный язык описания внешнего вида веб-страницы</span>
<b>CSS</b></a> могут быть подключены в веб-документ...

Результат Примера 3
(Наведи на слово CSS, чтобы увидеть подсказку.)

Стили CSS («каскадные таблицы стилей») — формальный язык описания внешнего вида веб-страницы CSS могут быть подключены в веб-документ...

 

Фокус на элементе

:focus

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

4 
<style>    
  .form-input {border: 2px solid black; padding: 5px;}
  .form-input:focus {background: lightyellow; border-color: green;}
</style>

<input class="form-input" placeholder="Введите имя">

Результат Примера 4

 

Структурные псевдоклассы

:nth-child

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис:
:nth-child(номер) - определяет элемент по его номеру в дереве элементов.

Значения номера:
  1. :nth-child(odd) - Все нечетные номера элементов.
  2. :nth-child(even) - Все четные номера элементов.
  3. :nth-child(число) - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
  4. :nth-child(выражение) - Выражение задается в виде an+b, где a и b целые числа. n — счетчик, который автоматически принимает значение 0, 1, 2...

 

Пример: Чередование цвета строк Таблицы

Чередование цвета строк Таблицы
5 
<style>
table.tab_ch {
margin: 0 auto; width: 80%;
border-collapse: collapse;
}
.tab_ch td, .tab_ch th  {  
border: 1px solid #7e5a25;
padding: 3px 7px;
}
.tab_ch th  {
text-align: left;  
padding: 15px;
background-color: #b4a18a; 
color: #ffffff;
}
/* нечетные номера строк */
.tab_ch tr:nth-child(odd) {background:#e9e1e1;}

/* четные  номера строк */
.tab_ch tr:nth-child(even){background:#f7f0de;}       
</style>

<table class="tab_ch">
<caption>Зарплата депутатов Госдумы</caption>
<tr><th>Год</th><th>ЗП</th><th>МРОТ</th></tr>
<tr><td>2017<<td><td>360 тыс.<<td><td>7800</td></tr>
<tr><td>2018</td><td>338,5 тыс.</td><td>9489</td></tr>
...
<tr><td>2021</td><td>500 тыс.</td><td>12792</td></tr>
</table>
Результат примера
5

Зарплата депутатов Госдумы
ГодЗарплата
(руб. в месяц)		МРОТ *
(руб. в месяц)
2017360 тыс.7 800
2018338,5 тыс.9 489
2019353 тыс.11 280
2020450 тыс.12 130
2021500 тыс.12 792

Для чередования цвета строк Таблицы в CSS используется псевдокласс :nth-child

Значение (odd) - Все нечетные номера
Значение (even) - Все четные номера элементов.

 

* МРОТ - Минимальный Размер Оплаты Труда