CODEWITHSUNDEEP
csscss-selectors
Fredrik
Fredrik

Reputation: 97

CSS selector combination syntax

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:

  1. 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?
  2. What does the td at the end mean? td.class I understand but class td?

Upvotes: 0

Views: 181

Answers (7)

user887675
user887675

Reputation: 557

  1. 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.)

  2. The last item (the td, here) listed is the item that will be styled.

Upvotes: 2

ivanjonas
ivanjonas

Reputation: 609

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)

Upvotes: 6

Andrei Cristian Prodan
Andrei Cristian Prodan

Reputation: 1122

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

Upvotes: 1

Omsai Jadhav
Omsai Jadhav

Reputation: 134

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

Upvotes: 1

Alexander Georgiev
Alexander Georgiev

Reputation: 43

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

Upvotes: 1

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

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>

Upvotes: 1

FabioG
FabioG

Reputation: 2986

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.

Upvotes: 1

Related Questions