Конспект: селекторы

Ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Нелёгкая жизнь без селекторов

Селекторы позволяют очень точно указывать к каким элементам применять CSS-свойства. 
Селекторы — это наш снайперский прицел.

Но для начала представим, что механизма селекторов не существует. 
Как в этом случае задавать CSS-свойства элементам? 
С помощью атрибута style. 


Например:

<p style="color: red;">...</p>

<ul class="target">
      <li style="background-color: white;">1</li>
      <li style="background-color: white;">2</li>
      <li style="background-color: white;">3</li>
      <li style="background-color: white;">4</li>
      <li style="background-color: white;">5</li>
    </ul>

Селекторы позволяют очень точно указывать к каким элементам применять CSS-свойства.

Селекторы — это наш снайперский прицел.

Но для начала представим, что механизма селекторов не существует.

Как в этом случае задавать CSS-свойства элементам?

С помощью атрибута style.

Например:

</ul>

Селекторы по тегам

Задавать атрибут style для каждого тега неудобно и долго. 
Особенно, если тот же результат можно получить с помощью единственного CSS-правила, в котором используется селектор для тега li.
С помощью селекторов по именам тегов можно задать стили для всех элементов списка, изображений, абзацев и так далее. 
Эти селекторы содержат имя тега без символов < и >. 

Например:
li {
  /* стили для элементов списка */
}

Одно правило может относиться сразу к нескольким селекторам, в таком случае селекторы перечисляются через запятую:

a, img {
  /* стили для ссылок и изображений */
}

li { 
  
  background-color: white; 
  
  }

Задавать атрибут style для каждого тега неудобно и долго.

Особенно, если тот же результат можно получить с помощью единственного CSS-правила, в котором используется селектор для тега li.

С помощью селекторов по именам тегов можно задать стили для всех элементов списка, изображений, абзацев и так далее.

Эти селекторы содержат имя тега без символов < и >.

Например:

li {

/* стили для элементов списка */

}

Одно правило может относиться сразу к нескольким селекторам, в таком случае селекторы перечисляются через запятую:

a, img {

/* стили для ссылок и изображений */

}

li {

background-color: white;

}

Селекторы по классам

Класс — это один из атрибутов тегов. 

Выглядит он вот так:

<li class="first"></li>
Этот атрибут особенный, так как в CSS существует возможность выбирать элементы по классу. 
Делается это с помощью такого селектора: .имя_класса. 

Например:

.first {
  /* стили для класса first */
}

Имена классов могут состоять из латинских символов, цифр и знаков - и _. 
Имя класса должно начинаться с латинской буквы.

Класс — это один из атрибутов тегов.

Выглядит он вот так:

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

Делается это с помощью такого селектора: .имя_класса.

Например:

.first {

/* стили для класса first */

}

Имена классов могут состоять из латинских символов, цифр и знаков - и _.

Имя класса должно начинаться с латинской буквы.

Отрабатываем селекторы по классам

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу. 
Можно, например, выбрать элемент одновременно по тегу и по классу или же элемент с двумя классами сразу. 
Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов. 
Давайте рассмотрим примеры.


В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:
/* выбор всех тегов ul с классом target */
ul.target {...}

<ul class="target"></ul>
Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:
/* выбор элементов с двумя классами: text и green */
.text.green {...}

<span class="text green"></span>
<p class="green text"></p>


Количество классов в селекторе может быть любым:
/* выбор тегов span с четырьмя классами: underlined, red, big и text */
span.underlined.red.big.text {...}

<span class="underlined red big text"></span>

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу.

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

Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов.

Давайте рассмотрим примеры.

В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:

/* выбор всех тегов ul с классом target */

ul.target {...}

Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:

/* выбор элементов с двумя классами: text и green */

.text.green {...}

Количество классов в селекторе может быть любым:

/* выбор тегов span с четырьмя классами: underlined, red, big и text */

span.underlined.red.big.text {...}

Контекстные селекторы

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }

Такие селекторы называют контекстными или вложенными. 
Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:
/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
   которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

Таким образом, можно задавать элементам различные стили в зависимости от их контекста. 
Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }

ul .hit { ... }

.footer .menu a { ... }

Такие селекторы называют контекстными или вложенными.

Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.

Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */

p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */

ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,

которые лежат внутри элементов с классом .footer */

.footer .menu a { ... }

Таким образом, можно задавать элементам различные стили в зависимости от их контекста.

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

Соседние селекторы

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.
Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.
Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. 
Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>
  <li class="hit"></li>
  <li class="miss"></li>
</ul>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.
Селектор .hit + li, а также селектор li + .miss, или даже li + li тоже применит стили к элементу с классом miss, то есть ко второму элементу списка.
А вот селектор .miss + .hit не сработает, так как элемент с классом miss находится после элемента с классом hit в разметке.

.first + li + li {
  background-color: white;
  }

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2.

Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>

</ul>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селектор .hit + li, а также селектор li + .miss, или даже li + li тоже применит стили к элементу с классом miss, то есть ко второму элементу списка.

А вот селектор .miss + .hit не сработает, так как элемент с классом miss находится после элемента с классом hit в разметке.

.first + li + li {

background-color: white;

}

Контекстные и соседние селекторы

Селекторы в CSS можно очень гибко комбинировать. 
В частности, можно комбинировать контекстные и соседние селекторы.
Например, селектор .player-1 .hit + .miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.


li {
  background-color: white;
  }
  
  .third + li {
    background-color: red;
    }
    
.first + li  {
  background-color: red;
  }   
  
.shooter-2 .third + li  {
  background-color: yellow;
  }

Селекторы в CSS можно очень гибко комбинировать.

В частности, можно комбинировать контекстные и соседние селекторы.

Например, селектор .player-1 .hit + .miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.

li {

background-color: white;

}

.third + li {

background-color: red;

}

.first + li {

background-color: red;

}

.shooter-2 .third + li {

background-color: yellow;

}

Дочерние селекторы

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

Взгляните на пример:

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
</ul>

По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. 
Иногда необходимо задать стили только для дочерних элементов. 
Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. 

Например: ul > li или ul > li > span.

.places li {
  border-bottom: 2px solid #cccccc;
}

.places span {
  font-weight: bold;
}

.places ul > li {
  border-bottom: none;
  
}


.places ul > li > span {
  border-bottom: none;
  font-weight: normal;
}

Потомком называются любые элементы, расположенные внутри родительского элемента.

А дочерними элементами называются ближайшие потомки.

Взгляните на пример:

<ul>

</ul>

По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков, что не всегда удобно.

Иногда необходимо задать стили только для дочерних элементов.

Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >.

Например: ul > li или ul > li > span.

.places li {

border-bottom: 2px solid #cccccc;

}

.places span {

font-weight: bold;

}

.places ul > li {

border-bottom: none;

}

.places ul > li > span {

border-bottom: none;

font-weight: normal;

}

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

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее. 
Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа :  , вот так селектор:псевдокласс. 


Например:

a:visited { ... }
li:last-child { ... }
.alert:hover { ... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

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


Например:
li:last-child { ... }
Этот селектор выберет последний элемент списка.

li {
  background-color: white;
    }
    
li:first-child {
  background-color: red;
  }    
  
li:last-child {
  background-color: yellow;
  }

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее.

Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа : , вот так селектор:псевдокласс.

Например:

a:visited { ... }

li:last-child { ... }

.alert:hover { ... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

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

Например:

li:last-child { ... }

Этот селектор выберет последний элемент списка.

li {

background-color: white;

}

li:first-child {

background-color: red;

}

li:last-child {

background-color: yellow;

}

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

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.
С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. 
Синтаксис псевдокласса: селектор:nth-child(выражение). 
Выражением может быть число или формула. 

Например:

1. li:nth-child(2) { ... }
2. li:nth-child(4) { ... }
3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы. 

li {
  background-color: white;
  }
  
li:nth-child(3) {
  background-color: red;
  
  }  
  
  li:nth-child(4) {
  background-color: red;
  
  }

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.

С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы.

Синтаксис псевдокласса: селектор:nth-child(выражение).

Выражением может быть число или формула.

Например:

1. li:nth-child(2) { ... }

2. li:nth-child(4) { ... }

3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

li {

background-color: white;

}

li:nth-child(3) {

background-color: red;

}

li:nth-child(4) {

background-color: red;

}

:nth-child и контекстные селекторы

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.
Например, следующий селектор выберет третий тег <li> внутри блока с классом shooter-2.

.shooter-2 li:nth-child(3) { ... }

Селектор не обязательно должен заканчивается псевдоклассом. 
Например, следующий селектор выберет элемент с классом .text в четвёртом элементе списка <li>.

li:nth-child(4) .text { ... }



li {
  background-color: white;
  }
  
.shooter-1 li:nth-child(2) {
  background-color: red;
  }
.shooter-1 li:nth-child(5) {
  background-color: red;
  }  
  
.shooter-2 li:nth-child(1) {
  background-color: red;
  }

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.

Например, следующий селектор выберет третий тег <li> внутри блока с классом shooter-2.

.shooter-2 li:nth-child(3) { ... }

Селектор не обязательно должен заканчивается псевдоклассом.

Например, следующий селектор выберет элемент с классом .text в четвёртом элементе списка <li>.

li:nth-child(4) .text { ... }

li {

background-color: white;

}

.shooter-1 li:nth-child(2) {

background-color: red;

}

.shooter-1 li:nth-child(5) {

background-color: red;

}

.shooter-2 li:nth-child(1) {

background-color: red;

}

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

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

Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата. 

Примеры:
1. a:hover { ... }
2. tr:hover { ... }
3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.
Благодаря этому псевдоклассу можно добавлять в интерфейс динамику и интерактивность, так как элементы начинают реагировать на действия пользователя, изменяя свой внешний вид.

table {
  background: rgba(255, 255, 255, 0.95);
}

tr:hover {
  background-color: #fcf8e3;
}

strong:hover {
  color: #0088cc;
}

Некоторые псевдоклассы позволяют выбирать элементы, с которыми взаимодействует пользователь.

Сначала познакомимся с псевдоклассом :hover.

Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата.

Примеры:

1. a:hover { ... }

2. tr:hover { ... }

3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.

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

table {

background: rgba(255, 255, 255, 0.95);

}

tr:hover {

background-color: #fcf8e3;

}

strong:hover {

color: #0088cc;

}

Динамические эффекты с помощью :hover

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?
Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover. 
Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. 

Посмотрите на пример:

li.top ul.submenu {
  display: none;
}

li.top:hover ul.submenu {
  display: block;
}


Первое правило прячет список-подменю. 
Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». 
Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. 
То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.


em {
  display: none;
}

:hover > em {
  display: inline;
  color:red;
  }
  
strong:hover {
  color: #0088cc;
  }

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?

Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover.

Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов.

Посмотрите на пример:

li.top ul.submenu {

display: none;

}

li.top:hover ul.submenu {

display: block;

}

Первое правило прячет список-подменю.

Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю».

Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков.

То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.

em {

display: none;

}

:hover > em {

display: inline;

color:red;

}

strong:hover {

color: #0088cc;

}

Псевдоклассы :link, :visited и :active

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.
:visited выбирает посещённые ссылки.
:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Обратите внимание на порядок правил. 
Если их расположить по-другому, то некоторые могут не сработать.

a:link {
  color: black;
  }
  
a:visited {
  color: #cccccc;
  } 
  
a:active {
  color: green;
  }

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.

:visited выбирает посещённые ссылки.

:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:

a:link { ... }

a:visited { ... }

a:hover { ... }

a:active { ... }

Обратите внимание на порядок правил.

Если их расположить по-другому, то некоторые могут не сработать.

a:link {

color: black;

}

a:visited {

color: #cccccc;

}

a:active {

color: green;

}

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

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

Пример использования псевдокласса:

input:focus {
  /* стили для поля в фокусе */
}


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Псевдокласс :focus</title>
    <link rel="stylesheet" href="course-5.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form class="login" action="https://echo.htmlacademy.ru/courses" method="post">
      <label for="academy-login">Логин</label>
      <input type="text" id="academy-login" name="academy-login">

      <label for="academy-password">Пароль</label>
      <input type="password" id="academy-password" name="academy-password">

      <input type="submit" value="Войти">
    </form>
  </body>
</html>

form input:focus {
  border-color: #0088cc;
}

Псевдокласс :focus позволяет выбрать элемент, который в данный момент в фокусе.

Например, текстовое поле, в которое установлен курсор, находится в фокусе.

В фокусе могут быть не только текстовые поля.

Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать ссылки.

Пример использования псевдокласса:

input:focus {

/* стили для поля в фокусе */

}

<!DOCTYPE html>

<html>

<head>

<title>Псевдокласс :focus</title>

</head>

<body>

<label for="academy-login">Логин</label>

<label for="academy-password">Пароль</label>

</form>

</body>

</html>

form input:focus {

border-color: #0088cc;

}

Селекторы атрибутов

Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.
Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.
Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. 

Примеры селекторов:

1. input[checked] { ... }
2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked, 
второй селектор выберет поля формы, у которых атрибут type имеет значение text.

input[required] {
  background-color: #fcf8e3;
  }

input[name="password"] {
  background-color: #f2dede;
  }
  
input[type="submit"] {
  border-color: green;
  }

Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.

Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.

Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут].

Примеры селекторов:

1. input[checked] { ... }

2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked,

второй селектор выберет поля формы, у которых атрибут type имеет значение text.

input[required] {

background-color: #fcf8e3;

}

input[name="password"] {

background-color: #f2dede;

}

input[type="submit"] {

border-color: green;

}

Селектор по id

Существует ещё один HTML-атрибут, для которого существует специальный селектор. 
Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.
На значение id распространяются те же ограничения, что и на имя класса. 
Также id должен быть уникальным на странице.

Пример:

HTML<p id="greeting">Приветствие!</p>
CSS#greeting {
  ...
}

Использование селекторов по id при оформлении считается плохой практикой. 
Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS.

Существует ещё один HTML-атрибут, для которого существует специальный селектор.

Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.

На значение id распространяются те же ограничения, что и на имя класса.

Также id должен быть уникальным на странице.

Пример:

HTML<p id="greeting">Приветствие!</p>

CSS#greeting {

...

}

Использование селекторов по id при оформлении считается плохой практикой.

Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS.

итог

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: интерактивное расследование</title>
    <link rel="stylesheet" href="challenge.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Результаты соревнования</h1>
    <table class="results">
      <tr>
        <th>Игрок</th>
        <th>Раунд 1</th>
        <th>Раунд 2</th>
        <th>Раунд 3</th>
        <th> Итог</th>
      </tr>
      <tr class="player-1"> 
        <td>Иван Васильев</td>
        <td>10</td>
        <td>-20</td>
        <td>30</td>
        <td class="total"> <span> 20 </span> </td>
      </tr>
      <tr class="player-2">
        <td>Анна Иванова</td>
        <td>50</td>
        <td>10</td>
        <td>-30</td>
        <td class="total"> <span>30 </span></td>
      </tr>
      <tr class="player-3 disqualified">
        <td  class="" >Василий Ольгин</td>
        <td> 50</td>
        <td> 50</td>
        <td> 50</td>
        <td class="total disqualified "> <span>150 </span></td>
      </tr>
      <tr class="player-4">
        <td>Ольга Аннова</td>
        <td>-10</td>
        <td>-20</td>
        <td>40</td>
        <td class="total"> <span> 10 </span></td>
      </tr>
          </table>
  </body>
</html>


h1 {
  font-size: 20px;
}

h1 + .results {
  margin-top: 20px;
}

th {
  font-weight: normal;
  background-color: #dad7f4;
  text-align: left;
}

td:nth-child(5) > span {
  font-weight: bold;
}

.disqualified {
  text-decoration: line-through;
}

.player-1 .total {
  background-color: silver;
}

.player-2 .total {
  background-color: gold;
}

.player-3 .total {
  background-color: red;
}

.player-4 .total {
  background-color: chocolate;
}

<!DOCTYPE html>

<html>

<head>

<title>Испытание: интерактивное расследование</title>

</head>

<body>

<h1>Результаты соревнования</h1>

<tr>

<th>Игрок</th>

<th>Раунд 1</th>

<th>Раунд 2</th>

<th>Раунд 3</th>

</tr>

<td>Иван Васильев</td>

</tr>

<td>Анна Иванова</td>

</tr>

<td class="" >Василий Ольгин</td>

</tr>

<td>Ольга Аннова</td>

</tr>

</table>

</body>

</html>

h1 {

font-size: 20px;

}

h1 + .results {

margin-top: 20px;

}

th {

font-weight: normal;

background-color: #dad7f4;

text-align: left;

}

td:nth-child(5) > span {

font-weight: bold;

}

.disqualified {

text-decoration: line-through;

}

.player-1 .total {

background-color: silver;

}

.player-2 .total {

background-color: gold;

}

.player-3 .total {

background-color: red;

}

.player-4 .total {

background-color: chocolate;

}