Question

In my HTML there are a lot of elements. Some div elements have an table as child element. I want to set some css properties to all div element, but differs between those with table and those without it.

My first approach:

The class property of those div-elements containing a table is set to something with ‘table’, so I can select them with attribute selectors as described here: http://www.w3.org/TR/selectors/#attribute-selectors

div[class*="Table"]
{ 
/* Set Properties for all div with 'table' inside class-attribute */
}

Unfortunately there seems to be no opposite attribute selectors.

So my first question is: Is that right or what can I do?

My next approach is, to check if one child is a table. With help of google I only find how to select e.g. first-child of an element, but not how to check, if it is a table or not.

So my question 2 and 3 is: How do I select those div elements, containing (or not containing) a table as child?

Edit: Usually the table would be first-child, but if possible I would like to check all child elements being a table or not

Answer 1

Your approach of adding a class to <div>s that contain a table is the only way to do this with CSS.

There is the :not() selector if that helps with this approach. It’s unsupported by IE 8 and below and Opera 9 and below, but all other browsers support it.

You can get the same effect by setting styles for <div>s that don’t contain tables with the div selector, then overriding those styles for <div>s with the table class, but :not() might make it less verbose. Demo here: http://jsfiddle.net/LyLS5/