Лекция про селекторы, классы, id и вложенность CSS правил в HTML Academy.

CSS — это язык, который используется для оформления HTML-документов. Его синтаксис значительно проще, чем у HTML, так как в CSS отсутствуют сложные правила, связанные с вложенностью элементов. Фактически, CSS — это довольно "плоский" язык, где вложенность практически не используется. Типичный CSS-файл состоит из последовательности CSS-правил. Каждое CSS-правило включает в себя селектор и список свойств с соответствующими значениями. Вот пример простого CSS-правила:

селектор {
  свойство: значение свойства;
  свойство: значение свойства;  ‹ это CSS правила
  свойство: значение свойства;    
}
/*== А это комментарий ==*/

Селекторы

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

Существует множество типов селекторов, но наиболее распространенными являются:

Селектор по тегу: Применяет стили ко всем элементам определенного типа например, p, h1, div

Селектор по классу: Применяет стили к элементам с определенным классом например, .main__page

Комбинированные селекторы: Также известные как вложенные или контекстные селекторы, они позволяют применять стили к элементам, находящимся внутри других элементов например, div p

p {...} /* Обращение по тегу */
.main__title {...} /* Обращение по классу */
p.nav__menu {...} /* Обращение к классу внутри тега */
#nav__bar {...} /* Обращение по id */
h1#main__title {...} /* Обращение к тегу с id */
.header a {...} /* Обращение к тегу, внутри тега с классом */
.header.nav__menu {...} /* Обращение к классу, внутри тега с классом */

Селектор по имени тега

Этот тип селекторов является самым базовым. Он создается путем указания имени тега без угловых скобок < и >. Такой селектор выбирает все элементы с соответствующим именем тега. Например, селектор 'p' выберет все элементы с именем 'p', то есть все абзацы.

Например

p {  ‹  Обращение ко всем тегам p   
  color: #ff0000     
}

Селектор по классу

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

.main {  ‹  Обращение к классу 
  color: #ff0000  
}

Можно объединить селекторы по тегу и по классу следующим образом: `tag.class`. Важно отметить, что между тегом и классом не должно быть пробела. Такой комбинированный селектор выберет только те элементы, которые соответствуют указанному тегу и имеют указанный класс.

p.main__title { ‹ Обращение к тегу p с классом main__title       
  color: #ff00000 
}

Селектор по id

Этот тип селектора функционирует аналогично селектору по классу, но начинается с символа решётки #, за которым следует имя идентификатора. Он выбирает все элементы, у которых значение атрибута id соответствует указанному имени идентификатора.

#nav-list { ‹ Обращение по id      
  color: #ff0000
}

Селектор оп id тоже можно комбинировать с селектором по тегу

h1#main-title { ‹ Обращение к тегу h1 с id main-title    
  color: #ff0000
}