First Child of Ancestor CSS - html

I have an HTML structure like so:
<div class="outer">
<div class="parent">
<div class="child"> <!-- TARGET THIS CLASS -->
Words!
</div>
</div>
<div class="parent">
<div class="child">
Words!
</div>
</div>
</div>
I am trying to target the first occurrence of the .child class in the HTML. I have tried
.child:first-child
But that targets both child classes. I have also tried
.outter > .child:first-child
But that doesn't seem to target the div at all. Any suggestions?

Unfortunately, that isn't quite available in css. You can however do this:
.parent:first-child .child:first-child { //css here }
There is an assumption here that the first child element in inside the first parent element. If it isn't, and the first parent element is empty, this will target nothing.

You need to target it based on the parent class like so:
.outer > .parent:first-child > .child:first-child

You can use multiple pseudo classes (just not on the same element)
.outer .parent:first-child .child:first-child {
//css here
}

Get the first child of outer then get the first child of that parent.

:first-child targets the first occurence of an element within the parent. Because both .child classes are the first child of their parents, they'll both be targeted by the css you have.
For your desired effect, use this:
.outer .parent:first-child .child:first-child

.parent:first-child
seems to work

Related

Is it possible with CSS to target a h1 but only if it's the very first item in a parent? [duplicate]

I need to select a particular element only if it occurs as the first child of a div. Is there a CSS selector that'll handle that case?
For example, I want to select this figure:
<div>
<figure></figure>
<p></p>
<p></p>
</div>
But I don't want to select this one:
<div>
<p></p>
<figure></figure>
<p></p>
</div>
I can't change the HTML, so I can't add a class. I know about the :first-child and :first-of-type selectors, but they don't fit this case by themselves. How can I select the first child only if it's a figure?
You could use CSS :first-child selector with descendant selector like this:
JSFiddle - DEMO
div figure:first-child {
color:red;
}
OR: with CSS > child selector (as suggested by #Alohci)
DEMO
div > figure:first-child {
color:red;
}
I don't see any issue with figure:first-child selector. It would select the <figure> element only if it is the first child of its parent.
While :first-child represents any element which is the first child in the children tree of the parent, the figure part would limit the selector to match an element only if it is a <figure>.
have you tried the following?
div figure {
color: green;
}
div figure:first-child {
color: blue;
}
figure:first-child will select all the figures that are first child of a parent.
Check this example at W3C.
Use div figure:first-child selector.
Here is example
<div>
<figure>test</figure>
<p>div 1 pgraph1</p>
<p>div 1 pgraph1</p>
</div>
<div>
<p>div 2 pgraph1</p>
<figure>test 2</figure>
<p>div 2 pgraph1</p>
</div>
CSS:
div figure:first-child{
border:1px solid red;
}
It will apply red border only to first child.
Please refer to fiddle for demo

Immediate children css, and only those

What I'm trying to achieve sounds really simple, but is not. I don't even know if I can accomplish what I'm trying todo.
Ok so we got our element with the classname .parent, .parent got two div children, one is immediate and the other one is put into the first one like so:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
Targeting the first child should be as simple as:
.parent > div {
color: green;
}
but it isn't, as "Second child" also get affected.
Is this achieveable?
Sidenote:
Some CSS-properties like "color" is inheriting from parents, even though the element does not got the direct style. I guess this is what causing the issue. But still, I don't want it to cascade.
Parent element color is inherited to children element. First set div color and then use direct children's color:
.parent div{
color: #000;
}
.parent > div {
color: green;
}
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
The css is in cascade so the changes you do to an element effect the children. You could, however put a css class to the second child to override the css.
When you use div > p it means that Selects all p elements where the parent is a div element
But if you set one element with a property, all children will inherit that property if you don't override it. For example:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
In your case, all divs will have the property color:green by inheritance. If you want to change the property of the second div you have to do the following: div.parent div div { color: red }. This means Select all div which parent is a div which parent is a div with class "parent".
This is how stylesheets work.
No, you can't.
CSS color property is Inherited by default.
It's not possible to do it in the way you want.
But more important: It's not an ISSUE, it's the way that supposed to be.
Remember: CSS => Cascade Style Sheet.
Now, for your question... the simple, easy and the right way to "solve" this... is the one that already told you #Bhojendra Nepal in his previous answer.
Edit:
Another option would be wrapping that flying text in a span tag.. or similar:
.parent > div > span {
color: green;
}
<div class="parent">
<div>
<span>First child</span>
<div>
<span>Second child</span>
</div>
</div>
</div>

CSS select first child if it's a certain tag

I need to select a particular element only if it occurs as the first child of a div. Is there a CSS selector that'll handle that case?
For example, I want to select this figure:
<div>
<figure></figure>
<p></p>
<p></p>
</div>
But I don't want to select this one:
<div>
<p></p>
<figure></figure>
<p></p>
</div>
I can't change the HTML, so I can't add a class. I know about the :first-child and :first-of-type selectors, but they don't fit this case by themselves. How can I select the first child only if it's a figure?
You could use CSS :first-child selector with descendant selector like this:
JSFiddle - DEMO
div figure:first-child {
color:red;
}
OR: with CSS > child selector (as suggested by #Alohci)
DEMO
div > figure:first-child {
color:red;
}
I don't see any issue with figure:first-child selector. It would select the <figure> element only if it is the first child of its parent.
While :first-child represents any element which is the first child in the children tree of the parent, the figure part would limit the selector to match an element only if it is a <figure>.
have you tried the following?
div figure {
color: green;
}
div figure:first-child {
color: blue;
}
figure:first-child will select all the figures that are first child of a parent.
Check this example at W3C.
Use div figure:first-child selector.
Here is example
<div>
<figure>test</figure>
<p>div 1 pgraph1</p>
<p>div 1 pgraph1</p>
</div>
<div>
<p>div 2 pgraph1</p>
<figure>test 2</figure>
<p>div 2 pgraph1</p>
</div>
CSS:
div figure:first-child{
border:1px solid red;
}
It will apply red border only to first child.
Please refer to fiddle for demo

nth-child(even) for a css class only not all nodes

Trying to only color certain every other div of class 'story':
<div class="wrap-well">
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
</div>
CSS:
.wrap-well div.story:nth-child(even) {
background-color:#ff00ff;
}
Fiddle:
http://jsfiddle.net/NF2dk/
But it seems that 'clearfix' columns are also counted...
#Marcin and #Explosion Pills is absolutely right here, but as I inspected your DOM, you've a consistent pattern going on there, you can use Adjacent selector to achieve this rather than using nth-child or nth-of-type
.wrap-well div.story + div.story {
background-color:#ff00ff;
}
Demo
This way, it will just do the job what you wanted to achieve, also it's much more compatible compared to nth pseudos
nth-child does not work with the selector, but the element. It selects each even div regardless of the composition of the selector.
You can use nth-of-type to only select <div> elements and use another element such as <br> for the clearfix.
http://jsfiddle.net/NF2dk/1/
There is nothing like nth-of-class() selector.
The closest you can get is nth-of-type(). But it will look at the element tag, not class assigned to the element.

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

I have the following html
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
And the following style:
DIV.section DIV:first-child
{
...
}
For some reason that I don't understand the style is getting applied to the "sub contents 1" <div> as well as the "header" <div>.
I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?
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.
Found this question searching on Google. This will return the first child of a element with class container, regardless as to what type the child is.
.container > *:first-child
{
}
CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, will select just the direct child of the parent, but its rules will be inherited by that div's children divs:
div.section > div { color: red }
Now, both that div and its children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:
div.section > div { color: red }
div.section > div div { color: black }
Now only that single div that is a direct child of div.section will be red, but its children divs will still be black.
The CSS selector for the direct first-child in your case is:
.section > :first-child
The direct selector is > and the first child selector is :first-child
No need for an asterisk before the : as others suggest. You could speed up the DOM searching by modifying this solution by prepending the tag:
div.section > :first-child
Use div.section > div.
Better yet, use an <h1> tag for the heading and div.section h1 in your CSS, so as to support older browsers (that don't know about the >) and keep your markup semantic.
div.section > div
Not exactly the question asked, but maybe useful:
div.section > :first-child:is(div)
This would match only the first child element of .section and only if it was a div.
Match:
<div class="section">
<div>MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
No match:
<div class="section">
<img ... >
<div>NO MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
This is how I solved when using TailwindCSS (v3.1) with arbitrary variants.
I only wanted the first column in table to be underlined when hovered, as it is a link.
[&>:first-child]:hover:underline