Aplicar estilo CSS a elementos filho

232

Quero aplicar estilos apenas à tabela dentro do DIV com uma classe específica:

Nota: Prefiro usar um seletor de css para elementos filhos.

Por que o nº 1 funciona e o nº 2 não?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

O que estou fazendo de errado?

css css-selectors

— m romano
fonte

Não esqueça que os seletores>, + e [] estão indisponíveis para o IE6 e inferiores.

— Erick

309

Este código " div.test th, td, caption {padding:40px 100px 40px 50px;}" aplica uma regra a todos os thelementos que estão contidos por um divelemento com uma classe nomeada test, além de todos os td elementos e todos os caption elementos.

Não é o mesmo que "todos td, the captionelementos que estão contidos por um divelemento com uma classe de test". Para fazer isso, você precisa alterar seus seletores:

' >' não é totalmente suportado por alguns navegadores mais antigos (estou olhando para você, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Ken Browning
fonte

existe alguma maneira de escrever div.test 3 vezes?

— m romana

2

@rm Não. Não há nidificação de regras ou 'com' tipo agrupamento

— sblundy

2

@romanm Há uma maneira de escrever 'div.test' três vezes! procure usar estruturas sass ou menos para escrever arquivos css! :)

— gillyb

@romanm - veja minha resposta, usando um * para direcionar todas as crianças para evitar a repetição ou usando .class> * para todas as crianças diretas. Não é díficil.

— Richard Edwards

A dica sobre não ser suportado no IE foi muito útil, eu estava tentando fazer algum CSS funcionar para o DTCoreText no iOS, mas não estava funcionando, o analisador é pior que o IE.

— Sirenes

123

.test * {padding: 40px 100px 40px 50px;}

— Richard Edwards
fonte

11

Observe que, * aqui significa que você não pode substituí-lo por nenhuma outra regra mais específica, porque .test *seria a regra mais específica para cada elemento filho. Em outras palavras, lembre-se de que o que você colocar dentro .test *não pode ser substituído por nenhuma regra css mais específica, porque test *é a regra mais específica.

— vadasambar

81

O > seletor corresponde apenas a filhos diretos, não a descendentes.

Você quer

div.test th, td, caption {}

ou mais provável

div.test th, div.test td, div.test caption {}

Editar:

O primeiro diz

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Considerando que o segundo diz

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

No seu original , div.test > thdiz any <th> which is a **direct** child of <div class="test">: o que significa que ele corresponderá, <div class="test"><th>this</th></div>mas não corresponderá<div class="test"><table><th>this</th></table></div>

— Greg
fonte

fwiw, porque o td e a legenda nesse seletor são "burros" - eles corresponderão a qualquer th / legenda sem levar em consideração o teste div.test. Esse tipo de segmentação cega raramente é o que você deseja em CSS para qualquer coisa, exceto os estilos mais gerais.

— 31413 annakata

@annakata: isso é uma parte do quadro css, eu estou tentando aplicá-lo localmente

— m roman

10

Se você deseja adicionar estilo a todas as crianças e nenhuma especificação para a tag html, use-a.

Etiqueta principal div.parent

tag criança dentro do div.parent como <a>, <input>, <label>etc.

código: div.parent * {color: #045123!important;}

Você também pode remover importantes, não é necessário

— user1369111
fonte

7

Aqui está um código que eu escrevi recentemente. Eu acho que ele fornece uma explicação básica da combinação de nomes de classe / ID com pseudoclasses.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Expandir snippet

— Marca
fonte

O CSS não permite comentários de linha única, como //. Veja stackoverflow.com/questions/4656546/…

— Volker E.

4

div.test td, div.test caption, div.test th

funciona para mim.

O seletor filho> não funciona no IE6.

— Traingamer
fonte

2

Tanto quanto eu sei disso:

div[class=yourclass] table {  your style here; }

ou no seu caso, mesmo isso:

div.yourclass table { your style here; }

(mas isso funcionará para elementos yourclassque podem não ser divs) afetará apenas as tabelas internas yourclass. E, como Ken diz, o> não é suportado em todos os lugares (e div[class=yourclass]também, portanto, use a notação de ponto para classes).

— tunnuz
fonte

0

Esse código também pode funcionar, usando a sintaxe SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
fonte