CSS Selector for Class Descendant Within a Class

Descendant selectors in a class

There is only one CSS descendant selector, and that is the space character:

E F /* Selects any F that descends from (or is contained by) an E */

Space-separated class names are just multiple classes that are separated by spaces, in a single HTML class attribute. The class attribute is not a selector, in fact not even part of CSS for that matter.

On a somewhat related note, however, one use of listing multiple classes per element is that you can then chain class selectors, such that only elements with all the classes listed are matched, not those that have one or fewer of the classes. For example:

.samename.nav_item /* Selects only elements that have both classes */

As to why samename is repeated in your given HTML, I have no idea. It's the same as having just one samename class.

Combining CSS descendant and class selectors

Assuming your td and th elements are validly placed within a tr element, you can simply condense your selector to:

.details-recommendations-table tr :nth-child(1) { /*rule*/ }

If, however, you're wanting to pull the first of each type (regardless of which nth child they are), you can use:

.details-recommendations-table tr :nth-of-type(1) { /*rule*/ }

JSFiddle demo.

In both cases this assumes that your td and th elements have no children. If they do have children, you should introduce a child combinator (>):

.details-recommendations-table tr > :nth-of-type(1) { /*rule*/ }

Select all descendant of one class except those inside another class (and vice versa)

Here is a simple solution with CSS variables. Check the following question for more details: CSS scoped custom property ignored when used to calculate variable in outer scope

* {

  margin: 0.2em 0;

  width: fit-content;

}

div {

  margin-left: 1em

}

p {

  background: var(--c);

}

.cyan {

  --c:cyan;

}

.orange {

  --c:orange;

}

<div class="orange">

  <p>Orange</p>

  <div>

    <p>Orange</p>

    <div>

      <p>Orange</p>

      <div class="cyan">

        <p>Cyan</p>

        <div>

          <p>Cyan</p>

        </div>

      </div>

    </div>

  </div>

</div>

<div class="cyan">

  <p>Cyan</p>

  <div>

    <p>Cyan</p>

    <div>

      <p>Cyan</p>

      <div class="orange">

        <p>Orange</p>

        <div>

          <p>Orange</p>

        </div>

      </div>

    </div>

  </div>

</div>

CSS class and descendant selectors practices

Descendant selectors allow you to avoid embedding class information in your html. This may be convenient when the wrapping block is a logical container. For example, if you have constructed a table using div tags and you have hundreds, or thousands, of rows you could potentially cut down your document size, and increase readability, by specifying a descendant style instead of specifying class='...' repeatedly.

  <div class='mytable'>
    <div></div>
    <div></div>
    <!-- A LOT MORE ROWS -->
  </div>

The advantage of specifying a class is that you aren't tied to a particular ordering. It can be extremely frustrating having to alter your descendant tags each time you want to rearrange your view. The other nice thing about specifying a class is that when working with CSS, it's far easier to search for a specific class name than have to decipher your descendant blocks.

To my knowledge, there aren't black & white guidelines as far as when each is appropriate. Use your own discretion and consider the benefits/shortfalls of each as you design.

Override descendant selector by class

In CSS, there are rules for specificity (quoted from MDN, and examples added to be clearer):

The following list of selectors is by increasing specificity:

Universal selectors - ex: *

Type selectors - ex: p

Class selectors - ex: .p_red

Attributes selectors - ex: [class="red"]

Pseudo-classes - ex: :hover

ID selectors - ex: #main

Inline style - ex: style attribute in your HTML

So, you can add specificity to your selector. There are, in your case, several ways to do this :

#main .red_p
#main p.red_p

Or, third way, remove the #main in #main p, so it'll be less specific than your red p rule.

Combine class selectors with descendant selectors

You can do it as ul li > a.somelcass which means direct descendant link tag inside ul and li with class someclass.

CSS selector for a child element whose parent element has a certain class

To select strong elements that are descendants of an element with class commandBar, use the descendant combinator along with a class selector:

.commandBar strong

In order to only select direct children strong elements, use the child combinator, >:

.commandBar > strong

Depending on your markup, you may also want to specify the element type that has the class .commandBar (in this case, div):

div.commandBar strong

CSS selector: ID or class in parent but rule for child

the descendant selector is simply a space.

table th {} select every th that is a child of table.

table.ABC th select every th that is a child of table with class ABC.

table.ABC th {
  color: red;
}

if you want to select the immediate child of a selector you have to use >.

table.ABC th {} will select only if the th is an immediate child of table.ABC.

this th will match ( note this is not semantically correct h

<table class="ABC">
 <th> ...</th>
</table>

while this th won't match

<table class="ABC">
  <thead>
    <th> ...</th>
  </thead>
</table>

CSS selector to find all h2 elements that are descendants of elements with classname=classname?

You could try like this:

.classname h2 {

}

[class='classname'] h2 {

}