Aplicar Estilo CSS para elementos secundarios

168

quiero aplicar estilos solamente a la mesa dentro de la DIV con una clase particular:Aplicar Estilo CSS para elementos secundarios

Nota: Yo prefiero usar un CSS-selector para elementos secundarios.

¿Por qué el Nº 1 funciona y el Nº 2 no?

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

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>

¿Qué estoy haciendo mal?

Fuente

2009-03-10 roman m

245

Este código "div.test th, td, caption {padding:40px 100px 40px 50px;}" se aplica una regla para todos th elementos que están contenidos por un elemento div con una clase llamada test, además de todos los td elementos y todoscaption elementos.

No es lo mismo que "todos td, th y caption elementos que están contenidos por un elemento div con una clase de test". Para lograr eso, necesita cambiar sus selectores:

'>' no es totalmente compatible con algunos navegadores antiguos (lo estoy viendo a usted, Internet Explorer).

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

Fuente

2009-03-10 20:21:27

es Hay alguna forma de escribir div.test 3 veces más? –

@rm Nope. No hay agrupamiento de reglas o agrupación de tipo 'con' – sblundy

gracias por aclarar –

Por lo que yo sé esto:

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

o en su caso incluso esto:

div.yourclass table { your style here; }

(pero esto funcionará para elementos con yourclass que podrían no ser div s) afectará solo las tablas dentro de yourclass. Y, como dice Ken, el> no es compatible en todas partes (y div[class=yourclass] también, así que use la notación de puntos para las clases).

Fuente

2009-03-10 20:22:08 tunnuz

El >selector corresponde solo a niños directos, no a descendientes.

¿Quieres

div.test th, td, caption {}

o más probablemente

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

Editar:

El primero dice

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

Considerando que el segundo dice

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

En el original dice el div.test > thany <th> which is a **direct** child of <div class="test">, lo que significa que coincidirá <div class="test"><th>this</th></div> pero no coincidirá <div class="test"><table><th>this</th></table></div>

Fuente

2009-03-10 20:22:54 Greg

waaaaay morelikely # 2 methinks – annakata

Creo que deberías expandir esta respuesta para explicar por qué # 1 probablemente no es lo que pretende. – SpoonMeiser

sí, explique por qué el # 1 no funciona –

No se olvide que la>, + y [] selectores no están disponibles para IE6 y bajo.

Fuente

2009-03-10 20:23:29 Erick

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

trabaja para mí.

El selector de elementos secundarios> no funciona en IE6.

Fuente

2009-03-10 20:32:18 Traingamer

Y (mientras lo busco) tienes la misma respuesta :-) – Traingamer

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

Fuente

2012-05-24 19:23:46

+21

Esta es la respuesta a la pregunta planteada en el título, así que si terminas aquí a través de Google (como yo) este es el que quieres. – BFWebAdmin

Para ser justos, estas son las respuestas que tuvieron sentido en 2009. –

Respondió mi búsqueda ... – SoEzPz

Aquí hay algunos códigos que recientemente escribí. Creo que proporciona una explicación básica para combinar nombres de clase/ID con pseudoclases.

.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>

Fuente

2012-11-26 15:32:59 Mark

CSS no permite comentarios de una sola línea como '//'. Ver https://stackoverflow.com/questions/4656546/why-dont-we-have-a-comment-in-css –

Si desea añadir estilo en todos los niños y ninguna especificación para la etiqueta html luego usarlo.

Etiqueta principal div.parent

etiqueta secundaria dentro de la div.parent como <a>, <input>, etc. <label>

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

También puede quitar importante, no es necesaria

Fuente

2013-05-02 06:55:15 user1369111

Agregar el '! Important' funciona como un amuleto !!! – HovyTech

Aplicar Estilo CSS para elementos secundarios

Respuesta

Cuestiones relacionadas