Selector for All a Tag Descendants

Selector for all a tag descendants

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.

CSS :not() selector on all descendants

In your example, the :not() selector is applied to the a element. This would only select a tags that did not have a .mystyle class on it.

#content > * > *:not(.mystyle) a {
    color: green;
}

The above will select any descendants 2 levels down that don't have a .mystyle class, then colour all their decendant a tags green.

Below is a working example:

#content > div > div:not(.mystyle) a {  color: green;}

<div id="content">  <div id="one">    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --></div>  <div id="two">    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --></div></div>

Select an element without selecting descendants

Use the CSS child combinator >:

.settings > ul > li > i {
  opacity: 0.5;
}

<div class="settings">
  <ul>
    <li>
      <i>Select this element</i>
      <ul>
        <li>
          <i>but not this one</i>
          <span></span>
        </li>
        <li>
          <i>or not this one</i>
          <span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

Select all direct descendant dom elements regardless of type

I assume you mean the child selector. It's >, not <.

.parent > *

That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)

How can I apply a css rule to all descendants of an elements

Use the descendant selector ^[W3C]: div.tst div.cls

> is the child selector ^[W3C] and will only match children of an element.

How do I apply a style to all children of an element

As commented by David Thomas, descendants of those child elements will (likely) inherit most of the styles assigned to those child elements.

You need to wrap your .myTestClass inside an element and apply the styles to descendants by adding .wrapper * descendant selector. Then, add .myTestClass > * child selector to apply the style to the elements children, not its grand children. For example like this:

JSFiddle - DEMO

.wrapper * {    color: blue;    margin: 0 100px; /* Only for demo */}.myTestClass > * {    color:red;    margin: 0 20px;}

<div class="wrapper">    <div class="myTestClass">Text 0        <div>Text 1</div>        <span>Text 1</span>        <div>Text 1            <p>Text 2</p>            <div>Text 2</div>        </div>        <p>Text 1</p>    </div>    <div>Text 0</div></div>