jQuery селектор class

Определение и применение

jQuery селектор class выбирает элементы, глобальный атрибут class которых, имеет указанное значение.

Обратите внимание на следующие общие правила, которые необходимо соблюдать при работе с селекторами класса:

• все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
• используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
• название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
• Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

jQuery синтаксис:

$(".class")

Добавлен в версии jQuery

Селектор в CSS

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

Селектор class — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p class="test">Абзац, который имеет глобальный атрибут class со значением test.</p>

main.js

JavaScript

$(document).ready(function () {
    $('.test').css({
        // выбираем элементы с указанным классом
        color: 'red', // задаем цвет текста
        'background-color': 'orange',
    }) // задаем цвет заднего фона
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Рассмотрим пример в котором используем селектор, который найдет элемент, который имеет одновременно два класса, которые мы укажем.

Селектор class — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p class="test">Абзац, который имеет глобальный атрибут class со значением test.</p>
<p class="test test2">Абзац, который имеет глобальный атрибут class со значением test и test2.</p>

main.js

JavaScript

$(document).ready(function () {
    $('.test.test2').css({
        // выбираем элементы у которых встречаются указанные  классы
        color: 'red', // устанавливаем цвет текста
        'background-color': 'orange',
    }) // задаем цвет заднего фона
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}