CODEWITHSUNDEEP
csscss-selectors
copenndthagen
copenndthagen

Reputation: 50732

Question on CSS selector

If I have a selector like

#myTable tr td .someClass{....}

Does this someClass refer "ONLY" to td having that class OR does it refer to any child of td having "someClass" ? So Is it same as ;

#myTable tr td.someClass{....}

Basically my question is does the space after td make any difference?

Upvotes: 1

Views: 97

Answers (7)

wsanville
wsanville

Reputation: 37516

#myTable tr td .someClass{....} refers to any element with a class of someClass that is inside a td tag, that is inside a tr tag, that is inside an element with an id of myTable.

#myTable tr td.someClass{....} refers to a td tag with a class of someClass, that is inside a tr tag, that is inside an element with an id of myTable.

Upvotes: 3

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41895

The space after the tddoes make a difference

css:

#myTable tr td.someClass{ color:brown; }
#myTable tr td .someClass{ color:red; }

html:

<table id="myTable">
<tr>
    <td class="someClass">
        cofee
        <span class="someClass">
            wine
        </span>
    </td>
</tr>

cofee will appear brown, and wine red.

Upvotes: 0

murgatroid99
murgatroid99

Reputation: 20277

The space does make a difference. The first selector selects any element with the class someClass that is a child of a td in a tr in myTable.

The second selects any td with the class someClass that is a child of a tr in myTable

Upvotes: 0

mathieu
mathieu

Reputation: 31202

Yes:

  • first case targets an child element of your td, having class "someclass"
  • second case targets td having class "someclass"

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12294

A space separate children from parent. Without the space you are telling the CSS to find an element with that class instead.

Upvotes: 0

Dennis
Dennis

Reputation: 32598

Yes, the space makes a difference:

td.someClass {...} //Refers to a table cell with the class someClass
td .someClass {...} //Refers to an element with the class someClass that is a descendant of a table cell

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

The former selector refers to an element of class someClass that's a descendant of a td.

To refer to a td element of class-name someClass use the latter selector.

The space is a descendent selector; if you want an immediate child (no elements between the td and the .someClass element) use >:

#myTable tr td > .someClass{....}

Upvotes: 1

Related Questions