Classi e sottoclassi CSS

102

È possibile, oltre a quello che sto facendo perché non sembra funzionare, farlo? Voglio essere in grado di avere sottoclassi che sono sotto una classe per utilizzare il CSS specificamente per quella class.subclass.

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>

Così posso usare semplicemente class = "item" per gli elementi sotto la classe css genitore "area1", "area2". So di poter usare class = "area1 item" per farlo funzionare, ma non capisco perché debba essere così prolisso al riguardo. La sottoclasse css non dovrebbe guardare a quale classe genitore si trova per definirla?

Nota: funziona in IE (usando 7 in questo momento), ma in FF non funziona, quindi presumo che questo non sia un modo standard CSS di fare qualcosa.

css

— Ryan Abbott
fonte

182

Ho solo bisogno di aggiungere uno spazio:

.area2 .item
{
    ...
}

— Chad Birch
fonte

Non uso davvero le sottoclassi ... qualcuno può darmi una ragione per cui sarebbe necessario?

— patricksweeney

2

Le sottoclassi sono solo un altro modo per aggiungere ulteriore specificità alle regole CSS dove è appropriato. Puoi avere una classe principale, ma puoi modificare la regola per un elemento in base a dove si trova nel documento.

— Matt Howell

74

Cordiali saluti, quando definisci una regola come hai fatto sopra, con due selettori concatenati insieme:

.area1.item
{
    color:red;
}

Significa:

Applica questo stile a qualsiasi elemento che abbia sia la classe "area1" che "elemento".

Ad esempio:

<div class="area1 item">

Purtroppo non funziona in IE6, ma questo è ciò che significa.

— Matt Howell
fonte

1

Questa era effettivamente la cosa che stavo cercando, grazie per averla spiegata!

— F-3000

So che questo è antico ma intendi "area1" o "oggetto" invece di "area1" e "oggetto"? Fa una differenza significativa.

— Mgamerz

grazie mille per questo, stavo scuotendo la testa per capirlo.

— user3547774

26

Il tuo problema sembra essere uno spazio mancante tra le tue due classi nel CSS:

.area1.item
{
    color:red;
}

Dovrebbe essere

.area1 .item
{
    color:red;
}

— pappagalli
fonte

14

vuoi forzare la selezione solo dei bambini? 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
fonte

1

Non è quello che stavo pensando, ma questa è una buona informazione se voglio solo bambini diretti. Grazie!

— Ryan Abbott

Non lo sapevo. Grazie per questo MrChrister

— Sebastian Sastre

10

Basta inserire uno spazio tra .area1 e .item, ad esempio:

.area1 .item
{
    color:red;
}

questo stile si applica agli elementi con elemento di classe all'interno di un elemento con classe area1.

— M4N
fonte

8

Metti uno spazio tra le tue classi

.area1 .item
{
    ...
}

Ecco un ottimo riferimento per i selettori CSS .

— mbillard
fonte

6

A seguito della risposta di kR105 sopra:

Il mio problema era simile a quello dell'OP (Poster originale), si verificava solo al di fuori di una tabella, quindi le sottoclassi non venivano chiamate dall'ambito della classe genitore (la tabella), ma al di fuori di essa, quindi ho dovuto AGGIUNGERE i selettori , come accennato in kR105.

Ecco il problema: avevo due riquadri (div), ciascuno con lo stesso raggio di confine (HTML5), padding e margine, ma dovevo renderli di colori diversi. Piuttosto che ripetere questi 3 parametri per ogni classe di colore, volevo che una "superclasse" contenesse border-radius / padding / margin, quindi solo singole "sottoclassi" per esprimere le loro differenze (virgolette doppie attorno a ciascuna in quanto non sono realmente sottoclassi - vedi il mio post successivo). Ecco come ha funzionato:

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}

Spero che qualcuno lo trovi utile.

— maximus
fonte

3

Questa è la spina dorsale dei CSS, la "cascata" nei fogli di stile a cascata.

Se scrivi le tue regole CSS in una singola riga, è più facile vedere la struttura:

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

L'utilizzo di più classi è anche un buon uso intermedio / avanzato dei CSS, sfortunatamente esiste un ben noto bug di IE6 che limita questo utilizzo durante la scrittura di codice cross browser:

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

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

IE6 IGNORA il primo selettore in una regola multi-classe, quindi IE6 applica effettivamente la regola .area1.larger come

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

Significa che influenzerà TUTTI gli elementi .larger.

È un bug molto brutto e sfortunato (uno dei tanti) in IE6 che ti costringe a non usare praticamente mai quella caratteristica dei CSS se vuoi un file CSS cross-browser pulito.

La soluzione quindi è usare i prefissi CSS classname per evitare collisioni con nomi di classi generici:

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

.area2.area2Larger { ... }

Puoi anche usare una sola classe, ma in questo modo puoi mantenere il CSS nella logica che intendi, sapendo che .area1Larger influisce solo su .area1, ecc.

1

La classe che applichi al div può essere utilizzata come punto di riferimento per gli elementi di stile con quel div, ad esempio.

<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 */

Per essere super semantico dovresti spostare la classe sul tavolo.

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

— George Wiscombe
fonte

1

puoi anche avere due classi all'interno di un elemento come questo

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

ogni elemento della classe è la propria classe

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
fonte

1

kR105 ha scritto:

puoi anche avere due classi all'interno di un elemento come questo

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

Non riesco a vedere il valore di questo, poiché secondo il principio degli stili a cascata, l'ultimo ha la precedenza. Ad esempio, se nel mio esempio precedente ho cambiato l'HTML in read

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

il bordo e il testo della casella sarebbero blu, poiché lo stile di .box2 assegna questi valori.

Anche nel mio post precedente avrei dovuto sottolineare che aggiungere selettori come ho fatto io non è la stessa cosa che creare una sottoclasse all'interno di una classe (la prima soluzione in questo thread), anche se l'effetto è simile.

— maximus
fonte