Bagaimana cara menggabungkan kelas dan ID dalam pemilih CSS?

221

Jika saya memiliki div berikut:

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

Apakah ada cara untuk mendefinisikan gaya yang mengekspresikan ide "A div with id='content'AND class='myClass'"?

Atau apakah Anda hanya pergi satu atau lain cara seperti di

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

Atau

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

css css-selectors

— Larsenal
sumber

2

jika Anda akan memilih oleh id maka tidak perlu memilih berdasarkan kelas juga, karena id unik sehingga hanya satu elemen yang akan cocok. Jadi dengan menambahkan kelas ke pemilih yang sama hanya mengetik tambahan

— TStamper

20

@ TOPtamper: Tidak harus. Anda hanya memikirkan dalam hal dokumen statis. Contohnya, Anda mungkin memiliki img#Inboxikon di halaman Anda yang biasanya diatur ke 50% opacity. Namun, ketika pengguna memiliki pesan, Anda ingin itu diatur ke 100% opacity, dan backend menunjukkan ini dengan menambahkan activekelas ke elemen. Dalam skenario seperti itu, masuk akal untuk memiliki pemilih yang menggabungkan ID dan classname.

— Lèse majesté

@TStamper: Juga, tidakkah memiliki pemilih kombo id + kelas yang lebih spesifik memberikan bobot / prioritas lebih daripada versi id saja? AFAIK, seharusnya. (TKI, aturan pemilih kombo id + kelas akan mengesampingkan aturan pemilih kombo id. (Inilah alasan / kebutuhan saya untuk menemukan utas ini sekarang.)

— govinda

Jadi, saya mengalami situasi yang sama. Misalnya saya memiliki banyak produk yang memiliki deskripsi tetapi juga ingin kontrol khusus atas produk individual, jadi, dapat saya lakukan: code<p id = Product_1 class = Produk> Produk 1 </p> <p id = Product_2 class = Produk> Produk 2 </p> code Ini untuk memungkinkan penataan gaya semua produk tetapi juga memungkinkan penataan individu untuk produk tertentu?

— Tamer Ziady

327

Di stylesheet Anda:

div#content.myClass

Sunting: Ini mungkin membantu, juga:

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

dan, per contoh Anda:

div#content.sectionA

Edit, 4 tahun kemudian: Karena ini sangat tua dan orang-orang terus menemukannya: jangan gunakan tagNames di pemilih Anda. #content.myClasslebih cepat daridiv#content.myClass karena tagName menambahkan langkah penyaringan yang tidak Anda butuhkan. Gunakan nama tag di pemilih hanya di mana Anda harus!

— ajm
sumber

31

Menentukan bahwa ID milik div hanya dapat merusak kinerja rendering (meskipun cukup banyak diabaikan) tanpa manfaat apa pun karena ID sudah unik. Saya akan pergi dengan # content.myClass sebagai gantinya untuk membuatnya bersih.

— mystrdat

3

div.class#idharus setara meskipun kurang direkomendasikan; gunakan bagian pemilih yang lebih unik terlebih dahulu.

— SF.

1

Terima kasih atas usaha Anda, bahkan setelah bertahun-tahun :). Masih membantu orang seperti saya. Hanya menggunakannya untuk proyek saya. Terpilih pasti.

— C4d

76

Ada perbedaan antara #header .calloutdan #header.calloutdi css.

Berikut adalah "Bahasa Inggris biasa" dari #header .callout:
Pilih semua elemen dengan nama kelas calloutyang merupakan turunan dari elemen dengan ID dari header.

Dan #header.calloutberarti:
Pilih elemen yang memiliki ID headerdan juga nama kelas callout.

Anda dapat membaca lebih lanjut di sini trik css

— Reza Abbasi
sumber

Saya membuat kesalahan ini dengan whitespace: #id .class vs # id.class

— ERJAN

5

Tidak ada yang salah dengan menggabungkan id dan kelas pada satu elemen, tetapi Anda tidak perlu mengidentifikasi keduanya dengan satu aturan. Jika Anda benar-benar ingin Anda dapat melakukannya:

#content.sectionA{some rules}

Anda tidak perlu divdi depan ID seperti yang disarankan orang lain.

Secara umum, aturan CSS khusus untuk elemen tersebut harus ditetapkan dengan ID, dan aturan tersebut akan memiliki bobot lebih besar dari pada hanya kelas. Aturan yang ditentukan oleh kelas adalah properti yang berlaku untuk banyak item yang tidak ingin Anda ubah di banyak tempat kapan pun Anda perlu menyesuaikan.

Itu intinya begini:

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

Masuk akal?

— Gabriel Hurley
sumber

4

Yah umumnya Anda tidak perlu mengklasifikasikan elemen yang ditentukan oleh id, karena id selalu unik, tetapi jika Anda benar-benar perlu, yang berikut ini akan berfungsi:

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

— Blixt
sumber

1

Anda dapat menggabungkan ID dan Kelas dalam CSS, tetapi ID dimaksudkan untuk menjadi unik, sehingga menambahkan kelas ke pemilih CSS akan membuat terlalu memenuhi syarat.

— Eric Wendelin
sumber

Itu poin yang bagus. Saya berpikir jika mungkin Anda memiliki satu set kelas yang sangat umum (mengatur hal-hal seperti float, tinggi / lebar, mungkin hal-hal seperti font) dan Anda ingin menimpa sesuatu di dalamnya dalam pengecualian unik ini?

— ajm

5

Kecuali jika Anda menggunakan stylesheet yang sama dengan halaman yang berbeda. :-)

— Patrick McElhaney

5

Contoh lain: ketika kelas ditambahkan secara dinamis dengan Javascript (# opsionalFields.enabled)

— Patrick McElhaney

Bahkan jika Anda menggunakan lembar gaya yang sama dengan halaman yang berbeda, akan lebih baik untuk meletakkan kelas di badan atau memiliki satu gaya untuk ID dan kemudian pisahkan definisi kelas untuk kelas dengan gaya penimpaan yang sesuai.

— Eric Wendelin

Ya, saya pikir itu cukup umum untuk melakukan ini. mis. li # SomeTab.state-selected

— Yablargo

1

gunakan: tag.id ; tag#classdalam variabel tag di css Anda.

— Lan ...
sumber

1

Saya pikir Anda mencampurnya sedikit - tag.class, dan tag # id, bukan?

— Harijs Krūtainis

0

Id seharusnya lebar dokumen unik, jadi Anda tidak harus memilih berdasarkan keduanya. Anda dapat menetapkan elemen beberapa kelas denganclass="class1 class2"

— Ben Hughes
sumber

1

Kelas bisa berubah. Sebagai contoh, Anda dapat memiliki div # id.active dan div # id.inactive.

— Daniel Moura

cukup adil, kalau dipikir-pikir itu, saya telah menggunakan fungsi ini, tapi saya salah mengerti apa perilaku yang diinginkan.

— Ben Hughes

0

Saya pikir Anda semua salah. ID versus Kelas bukan masalah kekhususan; mereka memiliki kegunaan logis yang sama sekali berbeda.

ID harus digunakan untuk mengidentifikasi bagian-bagian tertentu dari halaman: header, bilah navigasi, artikel utama, atribusi penulis, footer.

Kelas harus digunakan untuk menerapkan gaya ke halaman. Katakanlah Anda memiliki situs majalah umum. Setiap halaman di situs ini akan memiliki elemen yang sama - header, nav, artikel utama, sidebar, footer. Tetapi majalah Anda memiliki bagian yang berbeda - ekonomi, olahraga, hiburan. Anda ingin tiga bagian memiliki penampilan yang berbeda - ekonomi konservatif dan sederhana, aksi olahraga-y, hiburan yang cerah dan muda.

Anda menggunakan kelas untuk itu. Anda tidak ingin harus membuat banyak ID - # artikel ekonomi dan # artikel olahraga dan # artikel hiburan. Itu tidak masuk akal. Sebaliknya, Anda akan mendefinisikan tiga kelas, ekonomi, olahraga, dan. Kepastian, lalu tentukan id #nav, #article, dan #footer untuk masing-masingnya.

— Greg
sumber

Anda benar-benar dapat menggunakan tag HTML semantik alih-alih ID untuk sebagian besar elemen yang Anda sebutkan. Tag header, footer, nav, bagian dll ada karena suatu alasan.

— Walter Schwarz

Tetapi memang Anda hanya harus menggunakan ID untuk elemen yang harus unik, lajang. Tetapi meskipun begitu itu hanya sangat berguna jika Anda perlu mengakses elemen itu melalui JavaScript, karena menggunakan ID membuat CSS Anda terlalu spesifik dan sulit untuk kemudian bergabung dengan CSS dan / atau HTML lain. Ada juga argumen bahwa ID lebih cepat daripada kelas, tetapi perbedaannya benar-benar diabaikan.

— Walter Schwarz

-1

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

Tidak akan berfungsi ketika doctype adalah html 4.01 ...

— BoltClock
sumber