Select First Descendant with CSS

How to select first descendant of specific type with CSS Selector in complex html

If your inputs are like in your example, you are able to use first-child:

#root input:first-child {  border-color:red;}
<div id="root">    <header>        <h1>Hello World</h1>    </header>    <div>        <div>            <form>                <input value="First Name">                <input value="Last Name">            </form>          </div>    </div></div>

select first decendant with class

First you target all elements that have the .red class. Then you unset it from all childs having also this class.

.red {
background: red;
}

.red .red {
background: none;
}

CSS - Find the first descendant

Since a .grid may occur anywhere between it and its container or its ancestor .row, you will not be able to do this with just a single selector. Using > combinators requires knowing in advance where exactly each level of .grid is nested and assuming it will not change, and :not() does not allow combinators so you couldn't do something like .container .grid:not(.row .grid) (unless you use jQuery).

Instead, you will need to style all .grid elements and revert the styles for any nested ones:

.container .grid {
/* Styles */
}

.container .row .grid {
/* Revert above styles */
}

How can I use first of type or first child to target only the top level one. Not the nested one?

You won't be able to use :first-of-type or :first-child to target only the top level one and ignore the nested one.

Both these pseudo css selectors checks child for immediate parent.
Sample Image

For example, :first-of-type works as:
Sample Image

And :first-child works as:
Sample Image

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.

CSS select first-of-type amongst grandchildren?

You need to select the first div as well

.parent > div:first-of-type > p:first-of-type {
color: red;
}

Demo

Here in the above selector, I am selecting the first p element nested inside the first div, which is further nested as direct child to an element having a class of .parent

> means select direct descendant to it's parent.


The above will fail in older versions of Internet Explorer, so if you are looking to support them as well, than equivalent supported selector will be

.parent > div:first-child > p:first-child {
color: red;
}

Demo (Supports IE7 as well)

But using :first-child and :first-of-type has huge difference, say you are using p:first-child and you have some other element apart from p, your selector will fail, so that's why I provided you a solution of using :first-of-type



Related Topics



Leave a reply



Submit