Css класс в классе: Селекторы по классу — CSS

Leave a Comment / Css / By /

Классы CSS

Как было сказано в статье по основам CSS, можно использовать теги в роли селекторов. К примеру, такой CSS код говорит о том, что весь текст внутри тега <b> будет красного цвета:

b {
   color: red;
}
В таком случае будут окрашены все теги <b> вне зависимости от их количества на странице. Если нужно задать свойство только для ограниченного количества элементов, то лучше использовать класс в качестве селектора.

Класс указывается для каждого тега самостоятельно так же, как и атрибуты. К примеру, придумаем класс под названием «test»:

<b>
В CSS коде селектор по классу будет иметь точку перед названием класса «.test»

.test {
   color: red;
}

Рекомендуем использовать в названиях класса только латинские символы, цифры, тире и подчёркивание

У каждого тега может быть несколько классов. Можно использовать их в качестве CSS селекторов как по отдельности, так и одновременно.
Рассмотрим пример

<b>Тише, мыши.</b>
<b>Кот на крыше.</b>
Применим к этим тегам следующие свойства:

.test1 {
   color: red;
}
.test2 {
   color: green;
}
Результат будет таким:

Тише, мыши. Кот на крыше.
На втором предложении значение свойства color от класса test1 будет перезаписано из-за класса test2.

Теперь рассмотрим способы использования нескольких классов одновременно в качестве селектора. Если использовать предыдущий пример, то для прямого обращение ко второму тегу необходимо использовать селектор «.test1.test2»

.test1.test2 {
   color: green;
}
Обратите внимание, что между названиями классов в селекторе нет пробела. И в селекторе может быть любое количество классов. К примеру: «.test1.test2.test3.test4» будет соответствовать тэгу с таким набором классов:

<b>

Пробел между названиями классов в селекторе ставится, только если надо обратиться к вложенному элементу.

К примеру, если есть html код:

<b>
   Тише, мыши.
   <u>Кот на крыше.</u>
</b>
То для обращения ко второму вложенному тегу надо поставить пробел внутри селектора между названиями классов, чтобы получилось так:

.test1 .test2 {
   color: green;
}
Таким образом можно обращаться к элементам любого уровня вложенности и с любым количеством тегов. К примеру, «.test1 .test2 .test3.test4 .test5» будет соответствовать вложенному тэгу с таким набором классов:

<b>
   <b>
      <b>
         <b>Сыр</b>
      </b>
   </b>
</b>
В таком случае CSS селектор будет выглядеть так:

.test1 .test2 .test3.test4 .test5 {
   color: green;
}
А результат на странице браузера будет выглядеть так:

Сыр

Была ли эта статья полезна? Есть вопрос?

Закажите недорогой хостинг Заказать

всего от 290 руб

Классы в CSS.

— it-black.ru Классы в CSS. — it-black.ru Перейти к содержимому

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов web-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class. Пример определения класса:


<p>…</p>
<p>…</p>

Классы CSS являются одним из основных составляющих стандарта CSS и придают ему дополнительную гибкость. Еще их называют селекторами классов CSS.

Рассмотрим пример применения класса на практике:


<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   .cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Пример 1.
  </p>
  <p>Пример 2.</p>
 </body>
</html>

Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.

Класс с привязкой к элементу

В этом случае класс представляется, как уникальное имя-идентификатор какого-либо перечня свойств, предваряющееся точкой. Оно ставится между названием элемента и его описанием. Синтаксис:


 НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так:


P.class1 { text-align: center; }

P.class2 { text-align: left; }

Вызов из HTML будет выглядеть таким образом:


<p> Текст выровнен по центру </p>
<p> Текст выровнен по левой стороне </p>
<p> текст отформатирован по умолчанию </p>
Объединение классов

Объединение классов в CSS используется довольно редко. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте

class через пробел. Рассмотрим пример:


<html>
 <head>
  <meta charset=utf-8">
  <title>Объединение классов</title>
  <style type="text/css">
   .bold { font-weight: bold; }
   .kursiv { font-style: italic; }
   .blue { color: blue; }
   .green { color: green; }
  </style>
 </head>
 <body>
  <p>Жирный текст синего цвета.</p>
  <p>Жирный курсивный шрифт текста.</p>
  <p>Жирный текст зеленого цвета.</p>
 </body>
</html>

Если в разных классах есть одно и тоже свойство, тогда при их объединении будет применено значение свойства того класса, который находится ниже в файле стилей.

Иногда возникает необходимость в объединении класса с другим классом или другим селектором (например, тега), либо то и другое одновременно, чтобы сузить рамки выборки элементов.

Для этого все селекторы указываются подряд без пробела, в этом случае стили будут применены только к тем элементам, которые соответсвуют сразу всем этим селекторам. Общий синтаксис:


.класс1.класс2 { свойство: значение; ... }

селектор.класс { свойство: значение; ... }

селектор.класс1.класс2 { свойство: значение; ... }

Рассмотрим пример:


<html>
 <head>
  <meta charset=utf-8">
  <title>Объединение селекторов</title>
  <style type="text/css">
   p.note { /* стили параграфа-примечания */
    border: 5px #c66 double;
    padding: 5px;
   }
   span.note { /* стили span для примечания */
    font-weight: bold;
    color: #f00;
   }
   .kursiv { font-style: italic; }
   .bold { font-weight: bold; }
   .kursiv.bold { text-decoration: underline; }
  </style>
 </head>
 <body>
  <p>
   <span>Примечание:</span> вообще, объединение
   <span>нескольких селекторов классов</span>
   используется в верстке довольно <span>редко</span>,
   зато объединение классов с другими селекторами —
   <span>очень часто</span>, особенно с селекторами тегов.
  
  </p>
</body>
</html>

Facebook

Twitter

  • One Comment

Группа в VK

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Облако меток

Похожие статьи

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

Instagram Vk Youtube Telegram Odnoklassniki

Полезно знать

Рубрики

Авторы

css — В чем разница между селекторами «.class.class» и «.class .class»?

спросил

Изменено 1 год, 2 месяца назад

Просмотрено 70 тысяч раз

В чем разница между . class.class и .class .class ?

  • css
  • css-селекторы
2

.class .class соответствует любым элементам класса .class , которые являются потомками другого элемента класса .class .

.class.class соответствует любому элементу обоих классов.

3

  1. .имя1.имя2

    означает div или элемент , имеющий оба класса вместе, например:

     <дел>...

  1. .имя1 .имя2

    означает div или элемент , который имеет класс имя1 и любой из его дочерних узлов, имеющий класс имя2 

     <дел>
    <дел>
        ...
    
 .класс1.класс2

Элемент, который имеет как class1 , так и class2 , установленный в атрибуте class (например: class="class1 class2" )

 . class1 .class2

Элемент с классом 2 , который является потомком элемента с классом 1 класса

3

.class.class также можно использовать, чтобы избежать использования !важно в случае, если селектор с более высокой специфичностью препятствует применению вашего правила.

В этом случае в элементе HTML нет двух классов. Вы только повторяете класс, специфичность которого вы хотите увеличить в стиле (селекторе), например

 (HTML) 
...

(CSS) .something.something {}

.class1.class2: Выбирает все элементы с class2, которые являются потомками элемента с class1

.class1 .class2: Выбирает все элементы с class1 и class2, установленными в его атрибуте class

 Давайте посмотрим на примере кода:
 
 .класс1.класс2{
  красный цвет;
}
.класс1 .класс2{
  цвет синий;
} 
 <дел>
  Привет, я селектор ". class1.class2"
<дел> <р> Привет, я селектор ".class1 .class2"