Classes e subclasses CSS

102

É possível, diferente do que estou fazendo porque parece não funcionar, fazer isso? Eu quero ser capaz de ter subclasses que estão em uma classe para usar o CSS especificamente para essa classe. Subclasse.

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>

Para que eu possa usar class = "item" para os elementos da classe css pai "area1", "area2". Eu sei que posso usar class = "area1 item" para fazer isso funcionar, mas não entendo por que tem que ser tão prolixo sobre isso. A subclasse css não deveria olhar em qual classe pai ela está para defini-la?

Nota: isso funciona no IE (usando 7 agora), mas não no FF, então estou assumindo que essa não é uma maneira padrão do CSS de fazer algo.

css

— Ryan Abbott
fonte

182

Só precisa adicionar um espaço:

.area2 .item
{
    ...
}

— Chad Birch
fonte

Eu realmente não uso subclasses ... alguém pode me dar uma razão em que isso seja necessário?

— patricksweeney

2

As subclasses são apenas mais uma maneira de adicionar especificidade adicional às suas regras CSS, onde for apropriado. Você pode ter uma classe principal, mas pode alterar a regra de um elemento com base em sua localização no documento.

— Matt Howell

74

Para sua informação, quando você define uma regra como fez acima, com dois seletores encadeados:

.area1.item
{
    color:red;
}

Isso significa:

Aplique este estilo a qualquer elemento que tenha a classe "área1" e "item".

Tal como:

<div class="area1 item">

Infelizmente, não funciona no IE6, mas é isso que significa.

— Matt Howell
fonte

1

Isso era realmente o que eu estava procurando, obrigado por explicar!

— F-3000 de

Eu sei que isso é antigo, mas você quer dizer "área1" ou "item" em vez de "área1" e "item"? Isso faz uma diferença significativa.

— Mgamerz

muito obrigado por isso, eu estava quebrando a cabeça para descobrir isso.

— user3547774

26

Seu problema parece ser a falta de espaço entre suas duas classes no CSS:

.area1.item
{
    color:red;
}

Deveria estar

.area1 .item
{
    color:red;
}

— Papagaios
fonte

14

você quer forçar apenas as crianças a serem selecionadas? 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

Não é o que eu estava pensando, mas esta é uma boa informação se eu quiser apenas filhos diretos. Obrigado!

— Ryan Abbott

Não sabia sobre aquele. Obrigado por isso MrChrister

— Sebastian Sastre

10

Basta colocar um espaço entre .area1 e .item, por exemplo:

.area1 .item
{
    color:red;
}

este estilo se aplica a elementos com item de classe dentro de um elemento com área de classe1.

— M4N
fonte

8

Basta colocar um espaço entre suas aulas

.area1 .item
{
    ...
}

Aqui está uma referência muito boa para seletores CSS .

— mbillard
fonte

6

Na sequência da resposta de kR105 acima:

Meu problema era semelhante ao do OP (Pôster Original), só ocorria fora de uma tabela, então as subclasses não foram chamadas de dentro do escopo da classe pai (a tabela), mas fora dela, então tive que ADICIONAR seletores , como kR105 mencionado.

Aqui estava o problema: eu tinha duas caixas (divs), cada uma com o mesmo raio de borda (HTML5), preenchimento e margem, mas precisava torná-las em cores diferentes. Em vez de repetir esses 3 parâmetros para cada classe de cor, eu queria uma "superclasse" para conter raio de borda / preenchimento / margem, então apenas "subclasses" individuais para expressar suas diferenças (aspas duplas em torno de cada uma, pois não são realmente subclasses - veja meu post posterior). Funcionou assim:

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}

Espero que alguém ache isso útil.

— maximus
fonte

3

Essa é a espinha dorsal do CSS, a "cascata" do Cascading estilo .

Se você escrever suas regras CSS em uma única linha, será mais fácil ver a estrutura:

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

Usar várias classes também é um bom uso intermediário / avançado de CSS; infelizmente, há um bug bem conhecido do IE6 que limita esse uso ao escrever código de navegador cruzado:

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

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

IE6 IGNORA o primeiro seletor em uma regra multiclasse, então o IE6 aplica a regra .area1.larger como

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

O que significa que afetará TODOS os elementos .larger.

É um bug muito desagradável e infeliz (um de muitos) no IE6 que o força a praticamente nunca usar esse recurso do CSS se você quiser um arquivo CSS cross-browser limpo.

A solução, então, é usar prefixos de nome de classe CSS para evitar colisão com nomes de classe genéricos:

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

.area2.area2Larger { ... }

Também pode usar apenas uma classe, mas dessa forma você pode manter o CSS na lógica pretendida, embora saiba que .area1Larger afeta apenas .area1 etc.

1

A classe que você aplica no div pode ser usada como um ponto de referência para estilizar elementos com esse div, por exemplo.

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

Para ser super semântico, você deve mover a classe para a mesa.

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

— George Wiscombe
fonte

1

você também pode ter duas classes dentro de um elemento como este

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

cada item da classe é sua própria classe

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
fonte

1

kR105 escreveu:

você também pode ter duas classes dentro de um elemento como este

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

Não consigo ver o valor disso, pois pelo princípio dos estilos em cascata, o último tem precedência. Por exemplo, se no meu exemplo anterior eu alterei o HTML para ler

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

a borda e o texto da caixa seriam azuis, pois o estilo do .box2 atribui esses valores.

Também em minha postagem anterior, eu deveria ter enfatizado que adicionar seletores como fiz não é o mesmo que criar uma subclasse dentro de uma classe (a primeira solução neste tópico), embora o efeito seja semelhante.

— maximus
fonte