Классы и подклассы css

Basic CSS: How to Use Class Within Another Class

Want to apply a CSS style to a class within another class? In this tutorial, I’ll show you everything you need to know to use CSS classes.

To nestle classes or any other selector in CSS, just separate the selector hierarchy with spaces. Example: .parent .child < /* CSS Properties */ >

Let’s say you have the following code, and want to apply style only to that is within .

Your CSS file will be like this:

All h1’s with «post-title» class that are within the «blog-post» class receive the CSS property. Even if they are nested inside other tags. While everything outside «blog-post», the rule will not apply.

For demonstration purposes, if we want to apply the same effect to all h1, independent of class:

You can use any CSS selector while nesting with spaces, you can use id selectors with #id-name, tag selectors like h1, pseudo-classes, etc.

Selecting only direct child

If you have the code below and want to apply the color gray only on links that are direct children of the footer, and not the link within the div copyright:

Selecting only the first child

Let’s take the same example above, but now the difference is that you want to apply the hierarchy to the first link only.

The code below will apply the grey to both the first child of footer and the first child of .copyright.

To apply only to the first child of footer:

Selecting only the last child

It’s quite common in lists to select the last item in the list and give it a different style, without the lower separation border, for example. The code is the same, we just need to change the selector.

Источник

CSS-классы и подклассы

Возможно ли, кроме того, что я делаю, потому что это не работает, чтобы сделать это? Я хочу иметь подклассы, которые находятся под классом, чтобы использовать CSS специально для этого класса. Класс.

.area1 < border:1px solid black; >.area1.item < color:red; >.area2 < border:1px solid blue; >.area2.item

 
 
 
Text Text Text
 
Text Text Text
 
 
 
 
 
 
Text Text Text
 
Text Text Text
 
 
 
 

Итак, я могу просто использовать для элементов под родительским классом css “area1”, “area2”. Я знаю, что могу использовать элемент item”, чтобы заставить это работать, но я не понимаю, почему он должен быть таким подробным. Не следует ли подкласс css посмотреть, какой родительский класс он находится, чтобы определить его?

Примечание: это работает в IE (с использованием 7 прямо сейчас), но в FF это не так, поэтому я предполагаю, что это не стандартный способ CSS делать что-то.

Просто нужно добавить пробел:

FYI, когда вы определяете правило, как вы делали выше, с двумя селекторами, соединенными вместе:

Примените этот стиль к любому элементу, который имеет как класс “area1”, так и “item”.

К сожалению, это не работает в IE6, но это то, что это значит.

Ваша проблема, кажется, является недостающим пространством между вашими двумя классами в CSS:

.area1 < border:1px solid black; >.area1>.item < color:red; >.area2 < border:1px solid blue; >.area2>.item

Просто поместите пробел между .area1 и .item, например:

этот стиль применяется к элементам с элементом класса внутри элемента с областью класса.

Просто вставьте пробел между вашими классами

Здесь очень хорошая справка для селекторов CSS.

После ответа от kR105 ответьте выше:

Моя проблема была похожа на проблему с OP (Original Poster), которая произошла только за пределами таблицы, поэтому подклассы не вызывались из области родительского класса (таблицы), но за его пределами, поэтому я к селекторам ADD, как упомянуто kR105.

В этом была проблема: у меня было две коробки (divs), каждая с одинаковым радиусом границы (HTML5), отступом и разметкой, но для того, чтобы сделать их разными цветами. Вместо того, чтобы повторять эти 3 параметра для каждого класса цветов, я хотел, чтобы “суперкласс” содержал border-radius/padding/margin, а затем отдельные “подклассы”, чтобы выразить свои различия (двойные кавычки вокруг каждого, поскольку они не являются действительно подклассами) см. мой более поздний пост). Вот как это получилось:

  
Hello my color is RED
 
Hello my color is BLUE
  

Надеюсь, что кто-то найдет это полезным.

Это основа CSS, “каскад” в каскадных таблицах стилей.

Если вы пишете свои правила CSS в одной строке, это упрощает просмотр структуры:

.area1 .item < color:red; >.area2 .item < color:blue; >.area2 .item span

Использование нескольких классов также является хорошим промежуточным/расширенным использованием CSS, к сожалению, есть известная ошибка IE6, которая ограничивает это использование при написании кросс-кода браузера:

IE6 IGNORES первый селектор в правиле многоклассов, поэтому IE6 фактически применяет правило .area1.larger как

Значение будет влиять на ВСЕ. большие элементы.

Это очень неприятная и неудачная ошибка (одна из многих) в IE6, которая заставляет вас почти никогда не использовать эту функцию CSS, если вам нужен один чистый CSS файл с несколькими браузерами.

Тогда решение должно использовать префикс класса CSS, чтобы избежать столкновения с универсальными именами классов:

.area1 < . >.area1.area1Larger < . >.area2.area2Larger

Можно использовать только один класс, но таким образом вы можете сохранить CSS в логике, которую вы намеревались, зная, что .area1Larger влияет только на .area1 и т.д.

вы также можете иметь два класса внутри такого элемента

каждый элемент класса является его собственным классом

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

 
 
 
Text Text Text
 
Text Text Text
 
 
 
 .area1 < border:1px solid black; >.area1 td < color:red; >/* This will effect any TD within .area1 */ 

Чтобы быть супер-семантичным, вы должны переместить класс в таблицу.

  
 
Text Text Text
 
Text Text Text
 
 
 

вы также можете иметь два класса внутри такого элемента

Я не вижу значения этого, поскольку по принципу каскадных стилей последний имеет приоритет. Например, если в моем предыдущем примере я изменил HTML для чтения

рамка рамки и текст будут синими, так как стиль .box2 присваивает эти значения.

Также в моем предыдущем сообщении я должен был подчеркнуть, что добавление селекторов, как и я, не совпадает с созданием подкласса внутри класса (первое решение в этом потоке), хотя эффект аналогичен.

Источник

Классы и подклассы CSS

Возможно ли это, кроме того, что я делаю, потому что это не работает? Я хочу иметь подклассы, относящиеся к классу, чтобы использовать CSS специально для этого класса.

.area1 < border:1px solid black; >.area1.item < color:red; >.area2 < border:1px solid blue; >.area2.item

 
 
 
Text Text Text
 
Text Text Text
 
 
 
 
 
 
Text Text Text
 
Text Text Text
 
 
 
 

Так что я могу просто использовать для элементов родительского класса css «area1», «area2». Я знаю, что могу использовать , чтобы заставить это работать, но я не понимаю, почему это должно быть так подробно. Разве подкласс css не должен смотреть на то, к какому родительскому классу он относится, чтобы определить его?

Примечание: это работает в IE (сейчас используется 7), но в FF — нет, поэтому я предполагаю, что это не стандартный способ делать что-то в CSS.

11 ответы

Просто нужно добавить пробел:

Я сам на самом деле не использую подклассы . может ли кто-нибудь указать мне причину, по которой это может быть необходимо? — Патриксвини

Подклассы — это еще один способ добавить дополнительную специфичность вашим правилам CSS там, где это необходимо. У вас может быть основной класс, но вы можете изменить правило для элемента в зависимости от того, где он находится в документе. — Мэтт Хауэлл

К вашему сведению, когда вы определяете правило, как вы делали выше, с двумя связанными вместе селекторами:

Примените этот стиль к любому элементу, который имеет класс «area1» и «item».

К сожалению, это не работает в IE6, но это то, что это значит.

Это было то, что я искал, спасибо за объяснение! — визу F-3000.

Я знаю, что это очень давно, но вы имеете в виду «область1» или «предмет» вместо «площадь1» и «предмет»? Это имеет большое значение. — Мгамерз

Большое спасибо за это, я ломал голову, чтобы понять это. — user3547774

Кажется, ваша проблема заключается в отсутствии пробела между двумя вашими классами в CSS:

.area1 < border:1px solid black; >.area1>.item < color:red; >.area2 < border:1px solid blue; >.area2>.item

Не то, что я думал, но это хорошая информация, если мне нужны только прямые дети. Спасибо! — Райан Эбботт

Не знал об этом. Спасибо за это, мистер Кристер — Себастьян Састре

Просто поставьте пробел между .area1 и .item, например:

этот стиль применяется к элементам с классом item внутри элемента с классом area1.

Просто поставьте пробел между классами

Вот очень хорошая ссылка для Селекторы CSS.

Моя проблема была похожа на проблему OP (Original Poster), возникла только за пределами таблицы, поэтому подклассы вызывались не из области родительского класса (таблицы), а за ее пределами, поэтому мне пришлось ДОБАВИТЬ селекторы , как упоминалось в кР105.

Вот проблема: у меня было два блока (div), каждый с одинаковым радиусом границы (HTML5), отступом и полем, но мне нужно было сделать их разными цветами. Вместо того, чтобы повторять эти 3 параметра для каждого цветового класса, я хотел, чтобы «суперкласс» содержал border-radius / padding / margin, а затем только отдельные «подклассы», чтобы выразить их различия (двойные кавычки вокруг каждого, поскольку они на самом деле не подклассы — см. мой более поздний пост). Вот как это получилось:

  
Hello my color is RED
 
Hello my color is BLUE
  

Надеюсь, кто-то сочтет это полезным.

Источник

Наследование классов в CSS — class, id, !importent

Разберём, как наследуются значения стилей для классов.

В CSS существует последовательность применения стилей для классов.

Например у нас есть следующая структура:

Стили у elements например будут одни, где присутствует одинаковый белый фон.

1. Применение дополнительного класса для перезаписи стиля определённого блока

Если мы добавим например к последнему блоку дополнительный стиль element-two :

И стиль для класса element-two добавим другой цвет фона, например красный. У такого блока с дополнительным классом перезапишутся стили, поменяется фон блока на красный:

А другие стили, которые не будут изменены и добавлены к дополнительному классу, будут наследоваться от класса element

2. Добавление id для перезаписи стиля дополнительного класса element-two

При добавлении id к блоку в HTML и написании стиля для класса element-two с добавлением #block , те стили которые применялись ранее только для дополнительного стиля element-two перезапишутся за счёт айдишника:

2. Добавление !important к значению перезапишет стиль, делая его важным.

Important — переводится как важный и применив данное дополнение к значению, сделает значение ещё более приоритетным:

Но применение !important не является хорошим тоном в среде веб-разработчиков, означает, что при написании кода, что-то было упущено, где-то был просчёт в иерархии при определении классов.

Данный метод не является ошибкой, просто не так круто выглядит в глазах опытных программистов!)

Источник