Aplicar estilo CSS para elementos filhos
-
08-07-2019 - |
Pergunta
Eu quero aplicar estilos somente à mesa dentro do DIV com uma classe particular:
Nota:. Eu prefiro usar um css-selector para elementos filhos
Por que o # 1 e # 2 obras 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?
Solução
Este código "div.test th, td, caption {padding:40px 100px 40px 50px;}
" aplica-se a regra a todos os elementos th
que estão contidos por um elemento div
com um test
classe chamada, além de elementos todas td
e todas elementos caption
.
Não é o mesmo que "todos os elementos td
, th
e caption
que estão contidos por um elemento div
com uma classe de test
". Para isso você precisa mudar seus seletores:
'>
' não é totalmente suportada 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;
}
Outras dicas
.test * {padding: 40px 100px 40px 50px;}
O >
selector corresponde filhos diretos apenas, não 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"> */
Em seu original div.test > th
diz any <th> which is a **direct** child of <div class="test">
, o que significa que irá corresponder <div class="test"><th>this</th></div>
mas não irá corresponder <div class="test"><table><th>this</th></table></div>
Se você quiser adicionar estilo em toda a criança e nenhuma especificação para tag html, em seguida, usá-lo.
tag Pai 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 importante, não é necessário
Aqui está um código que eu escrevi recentemente. Eu acho que ele fornece uma explicação básica de combinar classe nomes / 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>
div.test td, div.test caption, div.test th
funciona para mim.
O seletor de criança> não funciona no IE6.
Tanto quanto eu sei isto:
div[class=yourclass] table { your style here; }
ou no seu caso, mesmo esta:
div.yourclass table { your style here; }
(mas isso vai funcionar para elementos com yourclass
que pode não ser div
s) afetará apenas as tabelas dentro yourclass
. E, como diz Ken, o> não é suportado em todos os lugares (e div[class=yourclass]
também, então usar a notação de ponto para classes).