Descendent Selector

descendent selector example

Descendent Selector in Action

  • There are two tables with 16 <td>s each. you want to effect only one of the <table>'s <td>s and not the others
  • The first "sub-selector" is an id selector that matches the id of the Power Table
  • The second "sub-selector" is just an element name that matches any <td>
  • What makes it a descendent selector is actually the space in bewteen the two "sub-selectors."
  • You could do this with a class selector (or just about any) as well

We've seen how you can apply styles to all elements with a certain class or element name (e.g. p, h1, etc.) or pick one out with an id selector. There are also ways to apply styles to elements based on their relationships with their ancestors. Stated differently: you can apply styles to descendents of elements matching more basic selectors (e.g. element type, class, etc). A descendent selector is two selectors separated by a space and the "large selector" for that rule "selects" elements that match the second selector that are descendents (inside) of the first selector.

These are useful when dealing with elements that have lots of children/descendents, such as tables; e.g. if you wanted to style all the <td>s of a particular <table> in a page with multiple tables you could just define a class and apply it to all the <td>s, which is obviously a pain. Better is to define a class for the <table> and effect the descendent <td>s using a descendent selector.

Since it is a selector, it part of a rule and will be found in either an internal or an external stylesheet. See w3schools.com for more information (they call it "Nesting Selectors").

Back to Knowledge Dump