[CSS-1] Селектор в CSS

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

1. Селектор элементов: Этот селектор выбирает все элементы указанного типа. Например, следующий CSS сделает все элементы <p> прочитанными:

p {
  color: red;
}

2. Селектор класса: этот селектор выбирает все элементы с определенным атрибутом класса. Например, следующий CSS сделает все элементы с классом «highlight» синим цветом:

<p class="highlight">This text will be blue.</p>
.highlight {
  color: blue;
}

3. Селектор ID: этот селектор выбирает элемент с определенным атрибутом id. Например, следующий CSS сделает элемент с идентификатором «header» красным фоном:

<h1 id="header">Welcome</h1>
#header {
  background-color: red;
}

4. Селектор атрибутов. Этот селектор выбирает элементы на основе наличия или значения определенного атрибута. Например, следующий CSS сделает все элементы ввода с атрибутом «required» красным контуром:

<input type="text" required>
input[required] {
  outline: 1px solid red;
}

5. Селектор псевдокласса. Этот селектор выбирает элемент на основе его состояния или положения в документе. Например, следующий CSS сделает все ссылки красными при наведении на них курсора:

a:hover {
  color: red;
}

6. Комбинирование селекторов. Вы можете использовать несколько селекторов для выбора определенных элементов на веб-странице. Например, следующий CSS заставит все элементы <p> внутри элемента <div> с классом 'контейнер' иметь красный цвет:

div.container p {
  color: red;
}

7. Селектор псевдоэлементов: Этот селектор выбирает определенную часть элемента. Например, следующий CSS сделает первую строку всех элементов <p> синего цвета:

p::first-line {
  color: blue;
}

8. Универсальный селектор. Универсальный селектор выбирает все элементы на странице. Например, следующий CSS заставит все элементы на странице иметь желтый цвет фона:

* {
  background-color: yellow;
}

9. Селектор потомков: Этот селектор выбирает все элементы, которые являются потомками указанного элемента. Например, следующий CSS сделает все элементы <p> внутри элемента <div> с классом 'контейнер' окрашенными в синий цвет:

div.container p {
  color: blue;
}

10. Селектор дочерних элементов. Этот селектор выбирает всех прямых дочерних элементов указанного элемента. Например, следующий CSS заставит все элементы <li>, которые являются прямыми дочерними элементами элемента <ul>, иметь зеленый цвет фона:

ul > li {
  background-color: green;
}

11. Селектор смежных братьев и сестер: этот селектор выбирает все элементы, которые являются соседними братьями и сестрами указанного элемента. Например, следующий CSS сделает все элементы <p>, которые идут сразу после элемента <h1>, окрашены в фиолетовый цвет:

h1 + p {
  color: purple;
}

Стоит отметить, что эти селекторы можно комбинировать по-разному, чтобы нацеливаться на определенные элементы на веб-странице. Вы можете использовать эти селекторы в различных комбинациях для создания более конкретных или сложных селекторов.