¿Cómo se interpreta esta porción de código CSS?

Estoy estudiando CSS y encontré este código pero no se como se interpreta la primera linea (form.Listar...)
form.Listar th, td th thead {
    font-size: x-small;
    background-color: #b2d5d6;
}
form.Listar td, td td {
    vertical-align: baseline;
    padding-bottom: 0px;
}

1 Respuesta

Respuesta
1
Muy simple. Esto se refiere a que en la web original existirá un<form id="Listar"></form> el cual posee en su interior tablas, con ese css se le define que las tablas "td" que estén dentro del formulario recibirán esas ordenes.
Espero que te sirva la información.
Como información extra te indico que esto también se suele usar en otros formatos como
img.Imagen {} simplemente para decirle que en <img id="Imagen" src="" /> se usaran las caracteristicas que indiques, pero solo para el.
(Es un método que a mi no me agrada, prefiero directamente #Imagen {} pero sera porque aun no le cogí utilidad).
Gracias por tu ayuda Experto, Entiendo lo del form y como se utiliza pero lo que no entiendo es porque colocan tres veces la misma etiqueta, es decir colocan tres veces la etiqueta td ( form. Listar td, td td ) o dos veces la etiqueta th ( form. Listar th, td th thead).
Un abrazo.
Pongamos el caso de que tu tienes la siguiente estructura:
<table>
<form id="Listar">
<tr>
<th>Columna 1</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Celda 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Celda 3</td>
</tr>
</form>
</table>
Lo que le dices con eso es,
form.Listar th td {bla bla}: Nivel form + th + td. Unicamente modificaras el primer nivel
form.Listar th td o form.Listar th, td td {bla bla}. Modificaras tanto primer nivel como td de segundo nivel.
Lo mejor es que te hagas algunas pruebas, así lo entenderás mejor.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas