Aplicar estilo CSS a elementos secundarios

232

Quiero aplicar estilos solo a la tabla dentro del DIV con una clase particular:

Nota: Prefiero usar un selector css para elementos secundarios.

¿Por qué funciona el # 1 y el # 2 no?

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>

¿Qué estoy haciendo mal?

css css-selectors romano m
fuente

No olvide que los selectores>, + y [] no están disponibles para IE6 y versiones inferiores.

Erick

309

Este código " div.test th, td, caption {padding:40px 100px 40px 50px;}" aplica una regla a todos los thelementos contenidos en un divelemento con una clase denominada test, además de todos los td elementos y todos los caption elementos.

No es lo mismo que "todos td, thy captionelementos que están contenidos por un divelemento con una clase de test". Para lograrlo, debe cambiar sus selectores:

' >' no es totalmente compatible con algunos navegadores antiguos (te estoy mirando, Internet Explorer).

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

Ken Browning
fuente

¿hay alguna forma de escribir div.test 3 veces?

romana m

2

@rm Nope. No hay anidación de reglas o agrupación de tipos 'con'

sblundy

2

@romanm ¡Hay tres formas de escribir 'div.test' tres veces más! ¡considera usar sass o menos frameworks para escribir archivos css! :)

gillyb

@romanm: vea mi respuesta, usando un * para apuntar a todos los niños para evitar que se repita, o usando .class> * para todos los niños directos. No es dificil.

Richard Edwards el

La sugerencia sobre no ser compatible con IE fue muy útil, estaba tratando de hacer que CSS funcionara para DTCoreText en iOS pero no funcionaba, su analizador es peor que IE.

Sirenas

123

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

Richard Edwards
fuente

11

Tenga en cuenta que, * aquí significa que no puede anularlo con ninguna otra regla más específica porque .test *sería la regla más específica para cada elemento secundario. En otras palabras, tenga en cuenta que cualquier cosa que ponga dentro .test *no puede ser anulada por ninguna regla css más específica porque test *es la regla más específica.

vadasambar

81

El > selector solo coincide con hijos directos, no descendientes.

Usted quiere

div.test th, td, caption {}

o más probable

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

Mientras 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 su original , div.test > thdice any <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>

Greg
fuente

fwiw, porque el td y el título en ese selector son "tontos": coincidirán con cualquier título / título dado sin tener en cuenta la prueba div. Ese tipo de orientación ciega rara vez es lo que desea en CSS para cualquier cosa que no sean los estilos más generales.

annakata

@annakata: eso es parte del marco css, estoy tratando de aplicarlo localmente

roman m

10

Si desea agregar estilo en todos los elementos secundarios y no hay especificación para la etiqueta html, úsela.

Etiqueta principal div.parent

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

codigo: div.parent * {color: #045123!important;}

También puede eliminar importante, no es obligatorio

usuario1369111
fuente

7

Aquí hay un código que escribí recientemente. Creo que proporciona una explicación básica de 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>

Expandir fragmento

marca
fuente

CSS no permite comentarios de una sola línea como //. Ver stackoverflow.com/questions/4656546/…

Volker E.

4

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

funciona para mi.

El selector secundario> no funciona en IE6.

Traingamer
fuente

2

Hasta donde yo sé esto:

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

o en tu caso incluso esto:

div.yourclass table { your style here; }

(pero esto funcionará para los elementos yourclassque podrían no ser divs) afectará solo las tablas dentro 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).

Tunnuz
fuente

0

Este código también puede hacer el truco, usando la sintaxis SCSS

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

greguintow
fuente

Aplicar estilo CSS a elementos secundarios

Respuestas: