22

Sorry if this sounds pretty basic to those who follow the css tag.

The webpage in question has multiple sections: 

<section id="top"> ; <section id="tab-banner">

Within these sections there is much html with many levels of nesting.

I just want to say grab all <a> tags that are descendants of each section. E.g.

#tab-banner a { /* css here */ }

How do I say grab all elements of a certain type (a) that are descendents of elements with specific IDs?

Adrift
  • 58,167
  • 12
  • 92
  • 90
Doug Fir
  • 19,971
  • 47
  • 169
  • 299
  • 1
    `#tab-banner a {css here}` is fine if you want just direct childrens use `#tab-banner > a {css here}` – DaniP Jan 28 '14 at 15:44
  • @Danko can you clarify. To select all anchor tags that are children, grandchildren and great grandchildren of #tab-banner I'd use #tab-banner > a? – Doug Fir Jan 28 '14 at 15:46
  • Nop if you want all `a` tags inside that id element the selector you post must work. Just if you want first level childrens use > – DaniP Jan 28 '14 at 15:47
  • @Danko hmm. I wonder if I'm doing something else wrong, will investigate. You're saying that #tab-banner a should select ALL a tags within #tab-banner – Doug Fir Jan 28 '14 at 15:49
  • Yep mate maybe is some problem with specificity. Can be other selector changing a elements inside the section or somw with `!important` If you can share us your url or fiddle – DaniP Jan 28 '14 at 15:50

3 Answers3

36

For all descendants, use:

#tab-banner *

For direct descendants, use:

#tab-banner > *

Edit:

As the op changed/clarified the question:

To find all descendants of a specific type, just use that type instead of *. Example:

#tab-banner a

So, what you are trying is correct. If the style doesn't apply to the elements that you expect, then those elements are actually not descendants of that section, or you have another rule that takes prescedence.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Why the downvote? If you don't explain what it is that you think is wrong, it can't improve the answer. – Guffa Jan 28 '14 at 18:41
  • Not my downvote, but it looks like the question was missing an important detail due to formatting issues at the time you answered, and the downvoter might have not taken that into account (or they felt downvoting alone was sufficient to notify you). The question seems to be looking for descendants of type `a` only. – BoltClock Jan 29 '14 at 04:10
2

Sounds like you might need the Universal selector, but I'd suggest you were more specific in how you attach your css

#tab-banner * {css here}
 the star selector will append the styles to all the decendants but this isn't best practice as it has performance effects

Universal_selectors

for more help checkout this helpful article The 30 CSS Selectors you Must Memorize

Kristian Phillip Hamilton
  • 39
  • 4
-1

Have a try with the Direct Child Selector :

#tab-banner > a { ... }
cubitouch
  • 1,929
  • 15
  • 28