0

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?
Improve this question
4
  • 5
    ... 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">" Commented Jun 11, 2014 at 14:21
  • Aha, so it is a series of child selectors then? Commented Jun 11, 2014 at 14:24
  • @FredrikLindqvist not a series of child selectors but a series of descendant selectors. 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. Commented Jun 11, 2014 at 14:26

7 Answers 7

Reset to default
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)
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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!
2

  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.
Improve this answer

3 Comments

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 :)
@FredrikLindqvist you seem to have a good grip on nuanced wording otherwise this would considered be the least explicit (although very correct) answer.
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 :)
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.

Improve this answer

Comments

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>
Improve this answer

Comments

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

Improve this answer

Comments

1

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

Improve this answer

Comments

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

Improve this answer

2 Comments

Good link, and noob-friendly answer!
I've been told that a lot, it's a gift I have!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.