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.
For example, :first-of-type works as:
And :first-child works as:
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
CSS Background Color Keyframes Animation
How to Animate Infinite Marker Movement Down an Svg Path Without Very High CPU Usage
Purgecss Whitelist Patterns with Tailwindcss
Draw Half Circle with CSS or Svg
Lato Font Missing Letters in Ie and Firefox
Use the ::Before Generated Content Selector on an Iframe Element
Not (Max-Width: 512Px) Not Working
CSS Perspective Not Working in Firefox
Give a CSS Styled Div a "Border-Left-Image"
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
How to Load CSS File Dynamically
How to Style Qpushbutton's Checked State to Remove Grey Dots
CSS - Mozilla Bug? Box-Shadow:Inset Not Working Properly
How to Use CSS to Distort Borders So They Look Like Sketched
CSS: Using Hsl Variable in Hsla
Margin Behavior of "Overflow:Hidden" Div After Floating Div on Webkit
When 1 Px Border Is Added to Div, Div Size Increases, Don't Want to Do That