Select All Direct Descendant Dom Elements Regardless of Type

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.)

Elem.querySelector's immediate child

You can use the universal selector * to get an immediate child with the class .center regardless of the parent element.

elem.querySelector('* > .center')

How to select the last element within an element regardless of type in CSS?

Use this:

section > *:last-child {
    // your custom css styles
}

Explanation:

This works because when you use:

> it select the immediate children

* this selects all the the elements

nth-child ensures that all the immediate children will be targetted (if you use nth-of-type that is not the case.

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

Possible to select the first child (when the first element will often be different)

You should use :first-child selector with child item and not parent item, and since you want to consider all the childs (whataver the tags/classes are) you have to use the universal selector * (but it's not mandatory as you can see below).

Here is an example:

.main *:first-child {    color: red;}/* or simply.main :first-child {    color: red;}*/
/* or use this to select ONLY direct childs.main > :first-child {    color: red;}*/

<div class="main">  <p>  Hello some type  </p>  <p>  And some more  </p></div>
<div class="main">  <h2>  A heading  </h2>  <p>  And some more text  </p></div>

Select all child elements recursively in CSS

Use a white space to match all descendants of an element:

div.dropdown * {
    color: red;
}

x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.

The asterisk * matches any element.

Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

Using querySelectorAll to retrieve direct children

Good question. At the time it was asked, a universally-implemented way to do "combinator rooted queries" (as John Resig called them) did not exist.

Now the :scope pseudo-class has been introduced. It is not supported on [pre-Chrominum] versions of Edge or IE, but has been supported by Safari for a few years already. Using that, your code could become:

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

Note that in some cases you can also skip .querySelectorAll and use other good old-fashioned DOM API features. For example, instead of myDiv.querySelectorAll(":scope > *") you could just write myDiv.children, for example.

Otherwise if you can't yet rely on :scope, I can't think of another way to handle your situation without adding more custom filter logic (e.g. find myDiv.getElementsByClassName("foo") whose .parentNode === myDiv), and obviously not ideal if you're trying to support one code path that really just wants to take an arbitrary selector string as input and a list of matches as output! But if like me you ended up asking this question simply because you got stuck thinking "all you had was a hammer" don't forget there are a variety of other tools the DOM offers too.

---

Related Topics