Как обратиться к элементу для назначения стилей?

CSS-селекторы

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

По тегу (Type selector)

// CSS
span {
  color: blue;
}

По классу (Class selector)

// CSS
.button {
  background-color: #007bff;
  padding: 10px 20px;
}

// HTML
<button class="button">Click me</button>

По ID (ID selector)

// CSS
#header {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  height: 80px;
}

// HTML
<div id="header">Logo</div>

Комбинированные селекторы

Селектор потомка — выбирает все элементы, которые находятся внутри другого элемента:

.container p {
  font-size: 16px;
}

Селектор дочерних элементов — выбирает только прямых потомков:

ul > li {
  list-style: none;
}

Соседний селектор — выбирает элемент, идущий сразу после другого:

h1 + p {
  color: gray;
  font-style: italic;
}

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

// Элементы с конкретным атрибутом
input[type="text"] {
  border: 1px solid #ccc;
}

// Элементы, содержащие значение
a[href*="example"] {
  color: red;
}

// Элементы, начинающиеся с значения
input[name^="user"] {
  background: #f0f0f0;
}

Псевдо-классы и псевдо-элементы

Псевдо-классы — состояния элементов:

a:hover {
  text-decoration: underline;
  color: #0056b3;
}

button:active {
  transform: scale(0.98);
}

input:focus {
  outline: 2px solid #667eea;
  box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
}

li:nth-child(2n) {
  background-color: #f9f9f9;
}

p:first-child {
  margin-top: 0;
}

Псевдо-элементы — добавляют контент или стилизуют части элемента:

.card::before {
  content: "★ ";
  color: gold;
}

p::first-line {
  font-weight: bold;
  color: #333;
}

input::placeholder {
  color: #999;
  font-style: italic;
}

JavaScript для доступа к элементам

В JavaScript можно динамически обращаться к элементам и изменять их стили:

// По ID
const header = document.getElementById('header');
header.style.backgroundColor = 'navy';

// По классу (все элементы)
const buttons = document.querySelectorAll('.button');
buttons.forEach(btn => {
  btn.style.color = 'white';
});

// По селектору (первый элемент)
const title = document.querySelector('h1');
title.style.fontSize = '32px';

// По тегу
const paragraphs = document.getElementsByTagName('p');
for (let p of paragraphs) {
  p.style.lineHeight = '1.6';
}

// Изменение класса
const box = document.querySelector('.box');
box.classList.add('active');
box.classList.remove('disabled');
box.classList.toggle('hidden');

CSS-in-JS подход в React

В современных фреймворках часто используют CSS-in-JS или Tailwind:

// styled-components
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

// Использование в React компоненте
function App() {
  return <Button>Click me</Button>;
}

Специфичность селекторов

Селекторы имеют разный приоритет:

• Инлайн-стили: 1000
• ID селекторы: 100
• Классы, псевдо-классы: 10
• Селекторы тегов: 1

При конфликте выигрывает селектор с большей специфичностью.