Select all block level elements with css

Question

Is there an easy way to select all block level elements using CSS?

I want to put em 1.5 em margin between all the block level elements in the main content area of ​​my site.

Now I have code like:

#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;} 

Which is a royal pain in the rear to read or support ...

I would like to replace it with something like:

 #wrapper .content *:block + *:block {margin-top: 1.5em;} 

Is it possible?

I cannot use * + * because it will also catch inline elements, table cells, etc., and I do not want random fields applied in the middle of paragraphs. I also can not use #wrapper .content > * , because then it will not be nested div , etc.

Answer 1

This is not possible with CSS; you cannot select an element based on one of its CSS properties. You will need to use JavaScript to select all elements with something like getComputedStyle or something similar, and then run some script logic based on what it finds.

The closest thing you can get in CSS is choosing HTML attributes; things like href or title .

Answer 2

@tylerh's answer is correct, which is not possible in pure css, as you ask.

One possible workaround with css is to create a common css class to handle block level elements such as .block-element

And then apply the style of the field with

 #wrapper .content .block-element { margin-top: 1.5em; } 

Answer 3

Is there an easy way to select all block level elements using CSS?

By default, non-blocked items ignore fields. Therefore, you answered your question.