Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't you group descendants in a CSS selector?

If you want to assign the same style to a group of descendants, why isn't there an easy way to do this with CSS?

Say you have an HTML table as follows:

<table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  .
  .
  .
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Why do you have to style all column headings and cells with the following selector?

#myTable th, #myTable td {}

Why isn't there a syntax similar to the following?

#myTable (th,td) {}
like image 493
eft Avatar asked Apr 29 '09 03:04

eft


People also ask

How are descendant selectors separated?

A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form " A B " matches when an element B is an arbitrary descendant of some ancestor element A .

Can you group selectors in CSS?

Grouping selectors - CSS TutorialYou can group multiple selectors into one declaration block, separating each selector with a comma. This will apply the styles to all of the matched elements in the list. You can also mix different types of selectors in the same list. The spaces are optional, but the comma is not.

What is a descendant selector CSS?

The descendant selector is a way to select elements that are located somewhere underneath other elements, according to the tree structure of the webpage. This selector is actually multiple selectors combined together, but separated by a space.

Are descendant selectors more specific than child selectors?

The Child Combinator (>) only selects those HTML Elements that are direct children of a specified element. While the Descendant Combinator selects all HTML Elements that are either children, grandchildren, great grandchildren and so on. They all are descendants of a specified element and thus all are selected.


3 Answers

Why isn't there a syntax similar to the following?

#myTable (th,td) {}

Quite simply because nobody bothered to propose a useful syntax... until as recently (relative to the time you posted this anyway) as 2008, as an :any() pseudo-class. This was discussed in greater depth a little later.

The first implementation surfaced from Mozilla, albeit as late as 2010, in the guise of :-moz-any():

#myTable :-moz-any(th, td) {}

The following year, it would be suggested that WebKit follow suit, with :-webkit-any():

#myTable :-webkit-any(th, td) {}

But if you were to try to use both prefixes together right now, then due to selector parsing rules you would have to duplicate the rulesets, making your code even longer and defeating the intended purpose of the pseudo-class:

#myTable :-moz-any(th, td) {}
#myTable :-webkit-any(th, td) {}

Which makes using the prefixed selectors in public-facing code all but pointless. I can see no legitimate use for them anywhere other than vendor-specific code, which means you probably won't be using them together, in the same stylesheet.

The new Selectors level 4 working draft has a proposal for a :matches() pseudo-class, which is based on the original :any() proposal but may see certain enhancements as the draft is revised:

#myTable :matches(th, td) {}

Of course, since it's a new draft, don't expect browser support until much later.

In the very specific case of styling both th and td elements, you could use * instead assuming that none of the tr elements in this table will ever contain children other than cell elements, such as script or template:

#myTable tr > * {}

But if you're a performance junkie and hate the * selector, you'll have to stick with doing it the long way.

like image 159
BoltClock Avatar answered Sep 28 '22 15:09

BoltClock


You might want to look into SASS - http://sass-lang.com

It allows you to write CSS in a more sensible way (similar to what you suggested), but ti still compiles down to plain old CSS.

For example:

#myTable{
    background: #CCC;

    tr{
      border: 1px solid #EEE;
    }

    td{
      background: blue;
    }
}
like image 43
FiniteLooper Avatar answered Sep 28 '22 16:09

FiniteLooper


You can group selectors by using the vendor specific -moz-any() and -webkit-any().

Please see the MDN reference on this, and the W3C recommendation on the :matches() pseudo-attribute.

Cheers!

like image 36
kunambi Avatar answered Sep 28 '22 15:09

kunambi