Kelas & Subkelas CSS

102

Apakah mungkin, selain yang saya lakukan karena tampaknya tidak berhasil, melakukan ini? Saya ingin memiliki subclass yang berada di bawah kelas untuk menggunakan CSS khusus untuk class.subclass tersebut.

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

Sehingga saya bisa menggunakan class = "item" untuk elemen di bawah class css induk "area1", "area2". Saya tahu saya bisa menggunakan class = "area1 item" agar ini berfungsi, tetapi saya tidak mengerti mengapa harus terlalu bertele-tele tentangnya. Bukankah seharusnya subkelas css melihat kelas induknya di bawah untuk mendefinisikannya?

Catatan: ini berfungsi di IE (menggunakan 7 sekarang), tetapi di FF tidak, jadi saya berasumsi ini bukan cara standar CSS untuk melakukan sesuatu.

css Ryan Abbott
sumber

Jawaban:

183

Hanya perlu menambahkan spasi:

.area2 .item
{
    ...
}
Chad Birch
sumber
Saya sendiri tidak benar-benar menggunakan subclass ...... adakah yang bisa memberi saya alasan di mana ini diperlukan?
patricksweeney
2
Subclass hanyalah satu cara lagi untuk menambahkan kekhususan tambahan ke aturan CSS Anda jika memang sesuai. Anda dapat memiliki kelas utama, tetapi Anda dapat mengubah aturan untuk elemen berdasarkan tempatnya di dalam dokumen.
Matt Howell
74

FYI, ketika Anda mendefinisikan aturan seperti yang Anda lakukan di atas, dengan dua pemilih dirangkai bersama:

.area1.item
{
    color:red;
}

Itu berarti:

Terapkan gaya ini ke elemen apa pun yang memiliki kelas "area1" dan "item".

Seperti:

<div class="area1 item">

Sayangnya itu tidak berfungsi di IE6, tapi itulah artinya.

Matt Howell
sumber
1
Ini sebenarnya hal yang saya cari, terima kasih telah menjelaskannya!
F-3000
Saya tahu ini kuno, tetapi apakah maksud Anda "area1" atau "item", bukan "area1" dan "item"? Itu membuat perbedaan yang signifikan.
Mgamerz
terima kasih banyak untuk ini, saya memeras kepala untuk mencari tahu.
pengguna3547774
26

Masalah Anda tampaknya ada ruang yang hilang antara dua kelas Anda di CSS:

.area1.item
{
    color:red;
}

Seharusnya

.area1 .item
{
    color:red;
}
Burung beo
sumber
14

Apakah Anda ingin memaksa hanya anak-anak yang dipilih? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}
MrChrister
sumber
1
Bukan apa yang saya pikirkan, tapi ini info yang bagus jika saya hanya ingin anak langsung. Terima kasih!
Ryan Abbott
Tidak tahu tentang yang satu itu. Terima kasih untuk itu TuanChrister
Sebastian Sastre
10

Beri spasi antara .area1 dan .item, misalnya:

.area1 .item
{
    color:red;
}

gaya ini berlaku untuk elemen dengan item kelas di dalam elemen dengan area kelas1.

M4N
sumber
8

Beri spasi di antara kelas Anda

.area1 .item
{
    ...
}

Berikut referensi yang sangat bagus untuk CSS Selectors .

mbillard.dll
sumber
6

Berikut dari balasan kR105 di atas:

Masalah saya mirip dengan OP (Poster Asli), hanya terjadi di luar tabel, jadi subclass tidak dipanggil dari dalam lingkup kelas induk (tabel), tetapi di luar itu, jadi saya harus MENAMBAHKAN penyeleksi , seperti yang disebutkan kR105.

Inilah masalahnya: Saya memiliki dua kotak (div), masing-masing dengan border-radius (HTML5) yang sama, padding dan margin, tetapi perlu membuatnya berbeda warna. Daripada mengulang 3 parameter tersebut untuk setiap kelas warna, saya ingin sebuah "superclass" berisi border-radius / padding / margin, lalu hanya "subclass" individual untuk mengekspresikan perbedaannya (tanda kutip ganda di masing-masing kelas karena mereka sebenarnya bukan subclass - lihat posting saya nanti). Begini cara kerjanya:

HTML:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

Semoga seseorang menemukan ini bermanfaat.

maximus
sumber
3

Itulah tulang punggung CSS, "cascade" di Cascading Style Sheets.

Jika Anda menulis aturan CSS dalam satu baris, ini akan memudahkan untuk melihat strukturnya:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

Menggunakan banyak kelas juga merupakan penggunaan CSS tingkat menengah / lanjutan yang baik, sayangnya ada bug IE6 terkenal yang membatasi penggunaan ini saat menulis kode lintas browser:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 MENGABAIKAN pemilih pertama dalam aturan kelas jamak, jadi IE6 benar-benar menerapkan aturan .area1.larger sebagai

/*.area1*/.larger { ... }

Artinya itu akan mempengaruhi SEMUA elemen .lebih besar.

Ini adalah bug yang sangat buruk dan disayangkan (salah satu dari banyak) di IE6 yang memaksa Anda untuk tidak pernah menggunakan fitur CSS itu jika Anda menginginkan satu file CSS lintas-browser yang bersih.

Solusinya kemudian adalah dengan menggunakan prefiks nama kelas CSS untuk menghindari bertabrakan dengan nama kelas generik:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

Mungkin juga menggunakan hanya satu kelas, tetapi dengan cara itu Anda dapat menyimpan CSS dalam logika yang Anda inginkan, sambil mengetahui bahwa .area1Larger hanya memengaruhi .area1, dll.


sumber
1

Kelas yang Anda terapkan pada div dapat digunakan sebagai titik referensi untuk elemen gaya dengan div itu, misalnya.

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

Untuk menjadi super semantik, Anda harus memindahkan kelas ke tabel.

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>
George Wiscombe
sumber
1

Anda juga dapat memiliki dua kelas dalam elemen seperti ini

<div class = "item1 item2 item3"></div>

setiap item di kelas adalah kelasnya sendiri

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}
kR105
sumber
1

kR105 menulis:

Anda juga dapat memiliki dua kelas dalam elemen seperti ini

<div class = "item1 item2 item3"></div

Saya tidak dapat melihat nilainya, karena berdasarkan prinsip gaya bertingkat, yang terakhir lebih diutamakan. Misalnya, jika di contoh saya sebelumnya, saya mengubah HTML menjadi membaca

 <div class="box1 box2"> Hello what is my color? </div>

batas kotak dan teks akan berwarna biru, karena gaya .box2 menetapkan nilai-nilai ini.

Juga di posting saya sebelumnya, saya harus menekankan bahwa menambahkan selektor seperti yang saya lakukan tidak sama dengan membuat subclass di dalam kelas (solusi pertama di utas ini), meskipun efeknya serupa.

maximus
sumber