CODEWITHSUNDEEP
htmlcss
Shenoy Tinny
Shenoy Tinny

Reputation: 1335

css property definition

I have a css class for a table definition like the following

.tabborder
{
    border:           1px solid black;
    border-collapse:  collapse;
}

And then I want all the th and td elements that are nested within the element that has the class="tabborder" to do the following

.tabborder th, td
{
    border:           1px solid black;
    border-spacing:   0;
}

Having th, td wouldnt work while just th or td works the way I want it to.

Is there a workaround for that. I know that writing seprate definitions like below works But is there an efficient way to do this

 .tabborder th
{
    border:           1px solid black;
    border-spacing:   0;
}

 .tabborder td
{
    border:           1px solid black;
    border-spacing:   0;
}

Thanks in advance

Upvotes: 2

Views: 145

Answers (1)

canon
canon

Reputation: 41675

The comma is used to group separate selectors.

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.

Although .tabborder is specified in the first selector, it is not implied in any subsequent selector.

.tabborder th,
.tabborder td /* you must specify .tabborder for each selector */
{
    border:           1px solid black;
    border-spacing:   0;
}

[edit] Alternatively, since a tr can directly contain only td and th elements (source), you may combine the child > and universal * selectors (fiddle):

.tabborder tr > *
{
    border: 1px solid #000000;   
    padding: 3px 6px;
}​

Upvotes: 7

Related Questions