CSS selector combination syntax

Question

I am using jqGrid for a project and inspecting the styles it uses I find selectors such as this:

.ui-jqgrid tr.ui-row-ltr td { 
... 
}

.ui-jqgrid is of course a class.

td.ui-row-ltr is a selector for class ui-row-ltr as applied to a table row element.

So to my questions:

What does it mean that they are separated by a space? I know comma separation .class1, .class2 means "Apply to class1 and class2", but what does space separation mean?
What does the td at the end mean? td.class I understand but class td?

... This is fundamentally basic CSS... It means "a <td> that is a descendant of a <tr class="ui-row-ltr"> that is a descendant of <___ class="ui-jqgrid">" — Niet the Dark Absol
– Niet the Dark Absol, Commented Jun 11, 2014 at 14:21
@FredrikLindqvist not a series of child selectors but a series of descendant selectors. — Mihai Stancu
– Mihai Stancu, Commented Jun 11, 2014 at 14:25
@FredrikLindqvist if for example you replace the spaces with "greater than" symbols (>) you will get a series of direct child selectors. Such as .ui-jqgrid > tr.ui-row-ltr > td which is stricter than .ui-jqgrid tr.ui-row-ltr td. — Mihai Stancu
– Mihai Stancu, Commented Jun 11, 2014 at 14:26

web-tiki · Accepted Answer · 2014-06-11 14:33:01Z

6

This is basic CSS indeed. Here are some examples for you:

div.bob selects <div class="bob">
div .bob selects any class="bob" elements nested inside any div:
- Ex1: <div><a class="bob"></div>
- Ex2: <div><span><a class="bob"></span></div>
Bonus: div > .bob selects direct descendants only (Ex1, but not Ex2 above)

edited Jun 11, 2014 at 14:33

web-tiki

104k33 gold badges226 silver badges258 bronze badges

answered Jun 11, 2014 at 14:29

ivanjonas

6099 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ivanjonas Over a year ago

thanks to @web-tiki for fixing up obvious errors. I've been using Zen Coding/Emmet lately, perhaps a bit too much if I'm writing such obviously wrong html!

TylerH · Accepted Answer · 2014-06-11 14:38:32Z

2

Space separation between CSS selectors means that the latter selector is a descendant of the former.

(Example: div .main will select any .main classes that are children (of any level) of a div element.)
The last item (the td, here) listed is the item that will be styled.

edited Jun 11, 2014 at 14:38

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Jun 11, 2014 at 14:25

user887675

5572 silver badges6 bronze badges

3 Comments

Fredrik Over a year ago

Thanks, that makes sense. I am marking this one as the answer because it is the one easiest to understand, and "descendant selector" is very google able :)

Mihai Stancu Over a year ago

@FredrikLindqvist you seem to have a good grip on nuanced wording otherwise this would considered be the least explicit (although very correct) answer.

Fredrik Over a year ago

Thanks, I think(?) Out of all the great answers, this is the first one that accurately describes the parent/descendant relationship, contains the key word "descendant", and that a CSS-noob like me could understand easily :)

FabioG · Accepted Answer · 2014-06-11 14:24:00Z

1

It means that the styles contained there will be applied to all tds contained in tr with class ui-row-ltr that are nested inside your element with ui-jqgrid class.

answered Jun 11, 2014 at 14:24

FabioG

2,9863 gold badges34 silver badges50 bronze badges

Comments

Naveed Ramzan · Accepted Answer · 2014-06-11 14:24:51Z

1

It is like this.

<div class="ui-jqgrid">
    <table>
        <tr class="ui-row-ltr">
            <td>some data</td>
        </tr>
    </table>
</div>

or may be

<table class="ui-jqgrid">
    <tr class="ui-row-ltr">
        <td>some data</td>
    </tr>
</table>

answered Jun 11, 2014 at 14:24

Naveed Ramzan

3,5893 gold badges27 silver badges33 bronze badges

Comments

Alexander Georgiev · Accepted Answer · 2014-06-11 14:26:44Z

1

Your selector will basically target every .ui-jqgrid which has tr.ui-row-ltr and if this passes it will apply your css properties to each td inside

answered Jun 11, 2014 at 14:26

Alexander Georgiev

434 bronze badges

Comments

Omsai Jadhav · Accepted Answer · 2014-06-11 14:27:44Z

1

Space is known as descendent combinator this, meaning select all elements inside that element.

answered Jun 11, 2014 at 14:27

Omsai Jadhav

1541 silver badge10 bronze badges

Comments

Andrei Cristian Prodan · Accepted Answer · 2014-06-11 14:28:59Z

1

Imagine we have a table id="main" , which contains many tr's which have td's inside. Now, the selector "#main td" means select all the elements with the tag td that are children or children of children of the element that has the id=main, not necesarily children, but any level below

so if i have .ui-jqgrid tr.ui-row-ltr td

it means, select all the elements with tag td, that have someone above their level a parent element tr with the class ui-row-ltr, that he has above an element with the class ui-jqgrid

All this is basic css stuff, search for some tutorials to learn more http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

answered Jun 11, 2014 at 14:28

Andrei Cristian Prodan

1,1224 gold badges17 silver badges34 bronze badges

2 Comments

Fredrik Over a year ago

Good link, and noob-friendly answer!

Andrei Cristian Prodan Over a year ago

I've been told that a lot, it's a gift I have!

Collectives™ on Stack Overflow

CSS selector combination syntax

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related