¿Hay una manera fácil de seleccionar todos los elementos de nivel de bloque con CSS?
Quiero poner un margen de 1,5 em en todos los elementos a nivel de bloque en el área de contenido principal de mi sitio
Ahora mismo tengo un código como:
#wrapper .content p, #wrapper .content ul, #wrapper .content div, #wrapper .content ol, #wrapper .content blockquote, #wrapper .content table {margin-top: 1.5em;}
#wrapper .content p:first-child, #wrapper .content ul:first-child, #wrapper .content div:first-child, #wrapper .content ol:first-child, #wrapper .content blockquote:first-child, #wrapper .content table:first-child {margin-top: 1.5em;}
Que es un dolor real en la parte trasera para leer o mantener ...
Me gustaría reemplazarlo con algo como:
#wrapper .content *:block + *:block {margin-top: 1.5em;}
es posible?
No puedo usar * + * porque eso también capturará elementos en línea, celdas de tablas, etc., y no quiero que se apliquen márgenes aleatorios en medio de los párrafos. Tampoco puedo usar #wrapper .content > * porque entonces no se anidó div etc.
Respuestas
1 para la respuesta № 1Esto no es posible con CSS; no puede seleccionar un elemento basado en una de sus propiedades de CSS. Deberá usar JavaScript para seleccionar todos los elementos con algo como getComputedStyle o algo similar, y luego ejecute una secuencia de comandos basada en lo que encuentra.
Lo más cercano a CSS es seleccionar HTML atributos; cosas como href o title.
0 para la respuesta № 2
La respuesta de @tylerh es correcta, no es posible activarlo en CSS puro de la forma que solicite.
Una solución posible con css es crear una clase de css genérica para manejar los elementos de nivel de bloque como .block-element
Y luego aplicar el estilo de margen con
#wrapper .content .block-element { margin-top: 1.5em; }
-3 para la respuesta № 3
¿Hay una manera fácil de seleccionar todos los elementos de nivel de bloque con CSS?
Por defecto, los elementos que no son bloques ignoran los márgenes. Así que respondiste a tu pregunta.