Select all block level elements with css

Question

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

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

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

I would like to replace it with something like:

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

Is this possible?

I can't use * + * because that will also catch inline elements, table cells, etc, and I don't want random margins being applied in the middle of paragraphs. I also can't use #wrapper .content > * because then it won't get nested div etc.

Answer 1

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

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

Answer 2

:not(a):not(b):not(label):not(form):not(abbr):not(legend):not(address):not(link):not(area):not(mark):not(audio):not(meter):not(b):not(nav):not(cite):not(optgroup):not(code):not(option):not(del):not(q):not(details):not(small):not(dfn):not(select):not(command):not(source):not(datalist):not(span):not(em):not(strong):not(font):not(sub):not(i):not(summary):not(iframe):not(sup):not(img):not(tbody):not(input):not(td):not(ins):not(time):not(kbd):not(var) {border:1px solid red;}

not sure if I missed an element, but you get the idea. I think this should work.