Jak połączyć klasę i identyfikator w selektorze CSS?

221

Jeśli mam następujący div:

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

Czy istnieje sposób zdefiniowania stylu, który wyraża ideę „Div z id='content'AND class='myClass'”?

A może po prostu poszedłeś tą czy inną drogą jak w

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

Lub

<div id="content-sectionA">
    Lorem Ipsum...
</div>
Larsenal
źródło
2
jeśli wybierzesz według identyfikatora, nie musisz również wybierać według klasy, ponieważ identyfikator jest unikalny, więc pasuje tylko jeden element. Tak więc dodanie klasy do tego samego selektora jest po prostu dodatkowym pisaniem
TStamper
20
@TStamper: Niekoniecznie. Myślisz tylko w kategoriach dokumentów statycznych. Na przykład img#Inboxna twojej stronie może być ikona, która normalnie jest ustawiona na 50% krycia. Jednak gdy użytkownik ma wiadomość, chcesz ustawić ją na 100% krycia, a backend wskazuje to poprzez dodanie activeklasy do elementu. W takim scenariuszu sensowne jest posiadanie selektora, który łączy zarówno identyfikator, jak i nazwę klasy.
Lèse majesté
@TStamper: Ponadto, czy posiadanie bardziej szczegółowego selektora kombi klasy id + nie daje większej wagi / pierwszeństwa niż sama wersja id? AFAIK, powinno. (IOW, reguły selektora kombinacji id + zastępują reguły selektora kombinacji id. (To był mój powód / potrzeba znalezienia tego wątku właśnie teraz.)
govinda
Mam więc podobną sytuację. Mam na przykład wiele produktów, które mają opisy, ale także chciałbym mieć konkretną kontrolę nad poszczególnymi produktami, więc mogę to zrobić: code<p id = Product_1 class = Produkt> Produkt 1 </p> <p id = Product_2 class = Produkt> Produkt 2 </p> Czy code pozwala to na ogólną stylizację wszystkich produktów, ale także umożliwia indywidualną stylizację dla określonych produktów?
Tamer Ziady

Odpowiedzi:

327

W twoim arkuszu stylów:

div#content.myClass

Edycja: Te też mogą pomóc:

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

i na przykład:

div#content.sectionA

Edytuj, 4 lata później: ponieważ jest on bardzo stary i ludzie wciąż go znajdują: nie używaj tagNames w selektorach. #content.myClassjest szybszy niż div#content.myClassponieważ tagName dodaje niepotrzebny krok filtrowania. Używaj tagNames w selektorach tylko tam, gdzie musisz!

ajm
źródło
31
Określenie, że identyfikator należy do div, może mieć negatywny wpływ na wydajność renderowania (choć w zasadzie nieistotny) bez żadnych korzyści, ponieważ identyfikator jest już unikalny. Zamiast tego wybrałbym # content.myClass, aby był czysty.
mystrdat
3
div.class#idpowinien być równoważny, choć mniej zalecany; najpierw użyj bardziej unikalnych części selektora.
SF.
1
Cóż, dziękuję za twój wysiłek, nawet po latach :). Wciąż pomagam facetom takim jak ja. Właśnie wykorzystałem go do mojego projektu. Z pewnością przegłosowany.
C4d
76

Istnieją różnice między css #header .callouti między nimi #header.callout.

Oto „zwykły angielski” #header .callout:
Wybierz wszystkie elementy o nazwie klasy, calloutktóre są potomkami elementu o identyfikatorze header.

I #header.calloutoznacza:
Wybierz element, który ma identyfikator, headera także nazwę klasy callout.

Możesz przeczytać więcej tutaj sztuczki css

Reza Abbasi
źródło
Zrobiłem ten błąd spacją: # id .class vs # id.class
ERJAN
5

Nie ma nic złego w łączeniu identyfikatora i klasy w jednym elemencie, ale nie powinno być potrzeby identyfikowania go za pomocą jednej reguły. Jeśli naprawdę chcesz, możesz:

#content.sectionA{some rules}

Nie potrzebujesz divprzedniej części identyfikatora, jak sugerowali inni.

Zasadniczo reguły CSS specyficzne dla tego elementu powinny być ustawione za pomocą identyfikatora, a te będą miały większą wagę niż reguły tylko klasy. Reguły określone przez klasę byłyby właściwościami mającymi zastosowanie do wielu elementów, których nie chcesz zmieniać w wielu miejscach za każdym razem, gdy trzeba je dostosować.

Sprowadza się to do tego:

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

Ma sens?

Gabriel Hurley
źródło
4

Ogólnie rzecz biorąc, nie powinieneś klasyfikować elementu określonego przez id, ponieważ id jest zawsze unikalny, ale jeśli naprawdę potrzebujesz, następujące elementy powinny działać:

div#content.sectionA {
    /* ... */
}
Blixt
źródło
1

Państwo może połączyć identyfikator i klasy w CSS, ale identyfikatory mają być unikalne, więc dodanie klasy do selektora CSS by zakwalifikować go nadmiernie.

Eric Wendelin
źródło
Trafne spostrzeżenie. Zastanawiam się, czy może masz zestaw bardzo ogólnych klas (ustawianie rzeczy takich jak liczba zmiennoprzecinkowa, wysokość / szerokość, może rzeczy takie jak czcionka) i czy chcesz w nich zastąpić coś w tym wyjątkowym wyjątku?
ajm
5
Chyba że użyjesz tego samego arkusza stylów z różnymi stronami. :-)
Patrick McElhaney
5
Kolejny przykład: dynamiczne dodawanie klas za pomocą Javascript (# opcjonalneFields.enabled)
Patrick McElhaney
Nawet jeśli używasz tego samego arkusza stylów z różnymi stronami, naprawdę lepiej byłoby umieścić klasę w treści lub mieć jeden styl dla identyfikatora, a następnie osobne definicje klas dla klas z odpowiednimi nadpisującymi stylami.
Eric Wendelin
Tak, myślę, że to dość powszechne. np. li # SomeTab.state-selected
Yablargo
1

użyj: tag.id ; tag#classw zmiennych tagu w swoim css.

Lan ...
źródło
1
Myślę, że trochę to pomieszałeś - tag.class i tag # id, nie?
Harijs Krūtainis
0

Identyfikatory powinny być unikalne dla całego dokumentu, więc nie powinieneś wybierać na podstawie obu. Możesz jednak przypisać elementowi wiele klas za pomocąclass="class1 class2"

Ben Hughes
źródło
1
Klasa może się zmienić. Na przykład możesz mieć div # id.active i div # id.inactive.
Daniel Moura
sprawiedliwie, przyjdź do tego, skorzystałem z tej funkcjonalności, ale źle zrozumiałem, jakie było pożądane zachowanie.
Ben Hughes
0

Myślę, że wszyscy się mylicie. Identyfikatory kontra klasa nie są kwestią specyficzności; mają zupełnie inne logiczne zastosowania.

Identyfikatorów należy używać do identyfikowania określonych części strony: nagłówka, paska nawigacyjnego, głównego artykułu, przypisania autora, stopki.

Klasy powinny służyć do stosowania stylów na stronie. Załóżmy, że masz ogólną stronę magazynu. Każda strona witryny będzie miała te same elementy - nagłówek, nawigację, artykuł główny, pasek boczny, stopkę. Ale twój magazyn ma różne sekcje - ekonomię, sport, rozrywkę. Chcesz, aby trzy sekcje miały różny wygląd - ekonomiczny konserwatywny i kwadratowy, sportowa akcja, rozrywka jasna i młoda.

Używasz do tego klas. Nie musisz tworzyć wielu identyfikatorów - # artykułów ekonomicznych i # artykułów sportowych i # artykułów rozrywkowych. To nie ma sensu. Zamiast tego zdefiniujesz trzy klasy: ekonomię, sport i rozrywkę, a następnie zdefiniujesz identyfikatory #nav, #article i #footer dla każdej z nich.

Greg
źródło
W rzeczywistości można używać semantycznych znaczników HTML zamiast identyfikatorów w przypadku większości wspomnianych elementów. Znaczniki nagłówka, stopki, nawigacji, sekcji itp. Istnieją z jakiegoś powodu.
Walter Schwarz
Ale w rzeczywistości powinieneś używać identyfikatorów tylko dla elementów, które powinny być unikalne, singletony. Ale nawet wtedy jest to naprawdę przydatne, jeśli potrzebujesz uzyskać dostęp do tego elementu przez JavaScript, ponieważ użycie identyfikatorów sprawia, że ​​Twój CSS jest zbyt szczegółowy i trudny do późniejszego scalenia z innymi CSS i / lub HTML. Istnieje również argument, że identyfikatory są szybsze niż klasy, ale różnica jest naprawdę znikoma.
Walter Schwarz
-1
.sectionA[id='content'] { color : red; }

Nie zadziała, gdy typem pliku jest HTML 4.01 ...

BoltClock
źródło