Введение в веб-разработку с HTML, CSS, JavaScript. Тимур Машнин

а затем вы указываете правило CSS с помощью селектора #name, объявления CSS будут применяться к содержимому элемента div с его значением id name.

      Селектор идентификатора определяется знаком решетки, за которым следует значение идентификатора в вашем HTML-документе. И опять же, у вас не может быть никакого промежутка между ними.

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

      Здесь у нас есть два селектора, сгруппированные вместе, div и также селектор класса blue, так как они оба используют одно и то же объявление CSS.

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

      Первый способ комбинирования селекторов – это селектор элемента с селектором класса.

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

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

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

      Следующим типом комбинации селекторов является дочерний селектор.

      В этом случае указывается селектор, за которым следует угловая скобка, за которой следует еще один селектор. И вы читаете эту комбинацию справа налево.

      И в этом случае мы выделяем каждый элемент p, который является прямым дочерним элементом элемента article. Таким образом, в этом примере элемент p, который является прямым дочерним элементом элемента article, получит стиль синего цвета, в отличие от обычного элемента p.

      Другой тип комбинации селекторов – это селектор потомков.

      И синтаксис этой комбинации – селектор пробел родительский селектор. И так же, вы читаете эту комбинацию справа налево.

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

      Теперь, нужно отметить, что эти комбинации селекторов не ограничиваются селекторами элементов. Так, например, у нас может быть комбинация .colored p элемента с классом, или комбинация класса с классом.

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

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