Как объединить класс и ID в селекторе CSS?

221

Если у меня есть следующий div:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Есть ли способ определить стиль, который выражает идею "DIV с id='content' AND class='myClass'"?

Или вы просто идете тем или иным путем, как в

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Или

<div id="content-sectionA">
    Lorem Ipsum...
</div>

css css-selectors

— Larsenal
источник

2

если вы собираетесь выбирать по идентификатору, то нет необходимости выбирать также и по классу, поскольку идентификатор уникален, поэтому будет соответствовать только один элемент. Таким образом, добавление класса к тому же селектору просто лишний ввод

— TStamper

21

@TStamper: не обязательно. Вы думаете только с точки зрения статических документов. В данном случае img#Inboxна вашей странице может быть значок, который обычно имеет непрозрачность 50%. Однако, когда у пользователя есть сообщение, вы хотите, чтобы оно было установлено на 100% непрозрачности, и серверная часть указывает на это, добавляя activeкласс к элементу. В таком случае имеет смысл иметь селектор, который сочетает в себе идентификатор и имя класса.

— Lèse Majesté

@TStamper: Кроме того, наличие более конкретного комбинированного селектора id + class дает ему больший вес / приоритет, чем одна версия id? AFAIK, так и должно быть. (IOW, правила селектора комбо id + class переопределят правила селектора комбо id. (Это была моя причина / необходимость найти эту тему только сейчас.)

— govinda

Итак, у меня похожая ситуация. Например, у меня есть много продуктов, которые имеют описания, но также хотели бы иметь конкретный контроль над отдельными продуктами, поэтому я могу сделать следующее: code<p id = Product_1 class = Product> Product 1 </ p> <p id = Product_2 class = Product> Product 2 </ p> code Это для того, чтобы разрешить общую стилизацию всех продуктов, но также позволить индивидуальную стилизацию для конкретных продуктов?

— Укротитель Зяды

329

В вашей таблице стилей:

div#content.myClass

Изменить: это может помочь тоже:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

и, по вашему примеру:

div#content.sectionA

Редактирование, 4 года спустя: так как он очень старый, и люди продолжают его находить: не используйте tagNames в ваших селекторах. #content.myClassбыстрее, чем div#content.myClassпотому, что tagName добавляет шаг фильтрации, который вам не нужен. Используйте tagNames в селекторах только там, где это необходимо!

— AJM
источник

31

Указание того, что идентификатор принадлежит элементу div, может только ухудшить производительность рендеринга (хотя и незначительно) без какой-либо выгоды для него, поскольку идентификатор уже уникален. Я бы пошел с # content.myClass, чтобы сделать его чистым.

— Mystrdat

3

div.class#idдолжен быть эквивалентным, хотя и менее рекомендуемым; сначала используйте больше уникальных частей селектора.

— SF.

1

Ну, спасибо за ваши усилия, даже спустя годы :). Всё ещё помогаю парням вроде меня. Просто использовал его для моего проекта. Проголосовал наверняка.

— C4d

76

Есть различия между #header .calloutи #header.calloutв CSS.

Вот "простой английский" #header .callout :
Выберите все элементы с именем класса, calloutкоторые являются потомками элемента с идентификатором header.

И #header.callout означает:
выберите элемент, который имеет идентификатор, headerа также имя класса callout.

Вы можете прочитать больше здесь трюки CSS

— Реза Аббаси
источник

Я сделал эту ошибку с пробелами: #id .class vs # id.class

— ERJAN

5

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

#content.sectionA{some rules}

Вам не нужно div перед удостоверением личности, как другие предложили.

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

Это сводится к этому:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Есть смысл?

— Габриэль Херли
источник

4

Ну, как правило, вам не нужно классифицировать элемент, указанный в id, потому что id всегда уникален, но если вам действительно нужно, должно работать следующее:

div#content.sectionA {
    /* ... */
}

— Blixt
источник

1

Вы можете комбинировать ID и Class в CSS, но идентификаторы должны быть уникальными, поэтому добавление класса в селектор CSS может привести к его переопределению.

— Эрик Венделин
источник

Неплохо подмечено. Я думаю, может быть, у вас есть набор очень общих классов (задающих такие вещи, как float, height / width, возможно, такие как font), и вы хотели бы переопределить что-то в них в этом уникальном исключении?

— AJM

5

Если вы не используете одну и ту же таблицу стилей на разных страницах. :-)

— Патрик МакЭлхани

5

Другой пример: когда классы добавляются динамически с помощью Javascript (# optionFields.enabled)

— Патрик МакЭлхани,

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

— Эрик Венделин

Да, я думаю, что это довольно распространено. например, li # SomeTab.state-selected

— Yablargo

1

используйте: tag.id ; tag#classв теге переменных в вашем CSS.

— Lan ...
источник

1

Я думаю, вы немного перепутали - tag.class и tag # id, нет?

— Харийс Крутейнис

0

Предполагается, что идентификаторы имеют уникальную ширину документа, поэтому вам не нужно выбирать на основе обоих. Вы можете назначить элемент нескольким классам, хотя сclass="class1 class2"

— Бен Хьюз
источник

1

Класс может измениться. Например, вы можете использовать div # id.active и div # id.inactive.

— Даниэль Моура

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

— Бен Хьюз

0

Я думаю, что вы все не правы. Идентификаторы в сравнении с классом - это не вопрос специфики; у них совершенно разные логические применения.

Идентификаторы должны использоваться для идентификации определенных частей страницы: заголовок, панель навигации, основная статья, указание автора, нижний колонтитул.

Классы должны использоваться для применения стилей к странице. Допустим, у вас есть общий сайт журнала. Каждая страница сайта будет иметь одинаковые элементы - заголовок, навигация, основная статья, боковая панель, нижний колонтитул. Но в вашем журнале есть разные разделы - экономика, спорт, развлечения. Вы хотите, чтобы три раздела выглядели по-разному - экономическая и консервативная, спортивная, спортивная, яркая и молодая.

Вы используете классы для этого. Вам не нужно создавать несколько идентификаторов - # economics-article и # sports-article и # entertainment-article. Это не имеет смысла. Вместо этого вы должны определить три класса: .economics, sports и .entertainment, а затем определить идентификаторы #nav, #article и #footer для каждого.

— Greg
источник

На самом деле вы можете использовать семантические теги HTML вместо идентификаторов для большинства элементов, которые вы упоминаете. Теги header, footer, nav, section и т. Д. Существуют по определенной причине.

— Вальтер Шварц

Но на самом деле вы должны использовать идентификаторы только для уникальных элементов, одиночек. Но даже тогда это действительно полезно, если вам нужен доступ к этому элементу через JavaScript, потому что использование идентификаторов делает ваш CSS слишком конкретным и трудным для последующего слияния с другими CSS и / или HTML. Существует также аргумент, что идентификаторы быстрее, чем классы, но разница действительно незначительна.

— Вальтер Шварц

-1

.sectionA[id='content'] { color : red; }

Не будет работать, если тип документа HTML 4.01, хотя ...

— BoltClock
источник