Селекторы CSS - Селекторы классов

RedDeveloper
25.03.2023 12:31
Селекторы CSS - Селекторы классов

Селекторы классов CSS - это селектор CSS, используемый для применения стиля к определенному элементу. Селекторы классов определяются путем добавления одного или нескольких классов к элементам HTML. Селектор класса начинается с точки (.), за которой следует имя класса.

Ниже я приведу несколько примеров;

  • .yohendis:

Выбирает все элементы с классом "yohendis".

  • .container .yohendis:

Выбирает все элементы с классом "yohendis" под элементом с именем "container".

  • .yohendis1.yohendis2:

Выбирает все элементы с классами "yohendis1" и "yohendis2".

  • .yohendis1, .yohendis2:

Выбирает все элементы с классом с именем "yohendis1" или "yohendis2".

*(yohendis: задается как любое имя).

Давайте рассмотрим его использование на нескольких примерах подробнее;

  1. Сделать цвет заголовков таблиц синим:
.tablobasligi {
  color: blue;
}

→HTML-код:

<table>
  <thead>
    <tr>
      <th class="tablobasligi">Başlık 1</th>
      <th class="tablobasligi">Başlık 2</th>
      <th class="tablobasligi">Başlık 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>İçerik 1</td>
      <td>İçerik 2</td>
      <td>İçerik 3</td>
    </tr>
  </tbody>
</table>

2. Чтобы добавить рамку ко всем изображениям:

.resimkenarligi {
  border: 1px solid black;
}

→ HTML-код:

<img src="image1.jpg" class="resimkenarligi">
<img src="image2.jpg" class="resimkenarligi">
<img src="image3.jpg" class="resimkenarligi">

3. изменить цвет фона только одного раздела:

.ozelalanrengi {
  background-color: yellow;
}

→HTML-код:

<div class="ozelalanrengi">
  <h2>Bu bölüm özel bir bölümdür</h2>
  <p>Bu bölümün içeriği burada.</p>
</div>

<div>
  <h2>Bu bölüm normal bir bölümdür</h2>
  <p>Bu bölümün içeriği burada.</p>
</div>
Таким образом, селекторы классов CSS обеспечивают большую гибкость при управлении дизайном. Они позволяют различным элементам иметь общие стилевые свойства, используя одинаковые имена классов, а также определять различные стилевые свойства, используя разные имена классов. Благодаря этому веб-страницы будут выглядеть более последовательными и организованными.
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.