Як поєднати клас та ідентифікатор у селекторі CSS?

Якщо у мене є такий div:

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

Чи є спосіб визначити стиль, що виражає ідею "Діл з id='content'І class='myClass'"?

Або ви просто підете в той чи інший бік, як в

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

Або

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

У вашому аркуші стилів:

div#content.myClass

Редагувати: Вони також можуть допомогти:

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

і, на ваш приклад:

div#content.sectionA

Редагувати, 4 роки потому: Оскільки це дуже давно, і люди продовжують його знаходити: не використовуйте тегНазви у своїх селекторах. #content.myClassшвидше, ніж div#content.myClassтому, що tagName додає крок фільтрації, який вам не потрібен. Використовуйте tagNames у селекторах лише там, де потрібно!

Існують відмінності між #header .calloutі #header.calloutв css.

Ось "звичайна англійська мова" #header .callout:
Виберіть усі елементи з назвою класу, calloutякі є нащадками елемента з ідентифікатором header.

А це #header.calloutозначає:
Виберіть елемент, у якого є ідентифікатор, headerа також ім'я класу callout.

Ви можете прочитати більше тут css трюки

Немає нічого поганого в поєднанні ідентифікатора та класу на одному елементі, але вам не потрібно ідентифікувати його обома за одним правилом. Якщо ви дійсно хочете, ви можете зробити:

#content.sectionA{some rules}

divПеред ідентифікатором не потрібно, як пропонують інші.

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

Це зводиться до цього:

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

Мати сенс?

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

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

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

use: tag.id ; tag#classу змінних тегів у вашому css.

Ідентифікатори повинні бути унікальними для документа, тому ви не повинні вибирати на основі обох. Ви можете призначити елементу кілька класів, хоча зclass="class1 class2"

Я думаю, ви все помиляєтесь. Ідентифікатори проти класу - це не питання конкретності; вони мають абсолютно різні логічні використання.

Ідентифікатори повинні використовуватися для ідентифікації конкретних частин сторінки: заголовка, рядка навігації, основної статті, атрибуції автора, колонтитула.

Класи слід використовувати для застосування стилів до сторінки. Скажімо, у вас є загальний сайт журналу. Кожна сторінка на сайті матиме однакові елементи - заголовок, nav, основна стаття, бічна панель, колонтитул. Але ваш журнал має різні розділи - економіка, спорт, розваги. Ви хочете, щоб три секції мали різний вигляд - економічно консервативний і квадратний, спортивні дії-у, розваги яскраві та молоді.

Ви використовуєте для цього заняття. Вам не потрібно робити кілька ідентифікаторів - # економіка-стаття та # спорт-стаття та # розвага-стаття. Це не має сенсу. Швидше, ви б визначили три класи: .economics, sports та .entertainment, а потім визначите ідентифікатори #nav, #article та #footer для кожного.

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

Не працюватимуть, коли тип файлу - HTML 4.01, хоча ...