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>
Related
I want to find how to select the .if-first-child element that's the first element of a specific parent, which in this case is <div>.
<div class="no-css">
<p class="if-first-child">The style will only take effect here!</p>
<p>No style here..</p>
<p class="if-first-child">No style here..</p>
</div>
<div class="no-css">
<nav>
<p class="if-first-child">No style here..</p>
</nav>
</div>
In other words, e.g. I want to apply background-color: black; in the .if-first-child only if it's the first child of <div>.
Keep note that the div p:first-child selector will still select the .if-first-child element even though it have a <nav> parent.
Unintended, I found how to select the target when I'm exposing in the question that the div p:first-child selector will still select the p:first-child element if it have a <div> grandparent.
div > .if-first-child:first-child {
background-color: black;
}
That will only target the first-child .if-first-child which is a direct child of <div>. It will not target a grandchild .if-first-child:first-child.
In simple, you can try this as well...
.if-first-child{color:red}
div .if-first-child{color:green}
It will target only first child to change the color of the text and rest will apply default text color.
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
The issue lies within this CSS and HTML. Here is a link to jsFiddle with the sample code.
HTML
<ul>
<li class"complete">1</li>
<li class"complete">2</li>
<li>3</li>
<li>4</li>
</ul>
CSS
li.complete:last-child {
background-color:yellow;
}
li.complete:last-of-type {
background-color:yellow;
}
Shouldn't either of these lines of CSS target the last li element with the "complete" class?
This query in jQuery doesn't target it either:
$("li.complete:last-child");
But this one does:
$("li.complete").last();
li {
background-color: green;
}
li.complete:first-child {
background-color: white;
}
li.complete:first-of-type {
background-color: red;
}
li.complete:last-of-type {
background-color: blue;
}
li.complete:last-child {
background-color: yellow;
}
<ul>
<li class="complete">1</li>
<li class="complete">2</li>
<li>3</li>
<li>4</li>
</ul>
:last-child will not work if the element is not the VERY LAST element
I think it's crucial to add/emphasize that :last-child will not work if the element is not the VERY LAST element in a container. For whatever reason it took me hours to realize that, and even though Harry's answer is very thorough I couldn't extract that information from "The last-child selector is used to select the last child element of a parent."
Suppose this is my selector: a:last-child {}
This works:
<div>
<a></a>
<a>This will be selected</a>
</div>
This doesn't:
<div>
<a></a>
<a>This will no longer be selected</a>
<div>This is now the last child :'( </div>
</div>
It doesn't because the a element is not the last element inside its parent.
It may be obvious, but it was not for me...
Sidebar: This may seem like a ridiculous gotcha, but the devil's always in the details. :last-of-type may fit your needs in most cases (and feels intuitive) but :last-child definitely serves a purpose. It offers greater specificity (targeting only those elements which are, in-fact, the very last child in a parent). It depends on your use-case.
The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.
The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.
.parent :last-child{ /* this will select all elements which are last child of .parent */
font-weight: bold;
}
.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
background: crimson;
}
.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
color: beige;
}
<div class='parent'>
<div class='child'>Child</div>
<div class='child'>Child</div>
<div class='child'>Child</div>
<div>Child w/o class</div>
</div>
<div class='parent'>
<div class='child'>Child</div>
<div class='child'>Child</div>
<div class='child'>Child</div>
<div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
<div class='child'>Child</div>
<div class='child'>Child</div>
<div class='child'>Child</div>
<p>Child w/o class</p>
</div>
To answer your question, the below would style the last child li element with background color as red.
li:last-child{
background-color: red;
}
But the following selector would not work for your markup because the last-child does not have the class='complete' even though it is an li.
li.complete:last-child{
background-color: green;
}
It would have worked if (and only if) the last li in your markup also had class='complete'.
To address your query in the comments:
#Harry I find it rather odd that: .complete:last-of-type does not work, yet .complete:first-of-type does work, regardless of it's position it's parents element. Thanks for your help.
The selector .complete:first-of-type works in the fiddle because it (that is, the element with class='complete') is still the first element of type li within the parent. Try to add <li>0</li> as the first element under the ul and you will find that first-of-type also flops. This is because the first-of-type and last-of-type selectors select the first/last element of each type under the parent.
Refer to the answer posted by BoltClock, in this thread for more details about how the selector works. That is as comprehensive as it gets :)
I encounter similar situation. I would like to have background of the last .item to be yellow in the elements that look like...
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
...
<div class="item">item x</div>
<div class="other">I'm here for some reasons</div>
</div>
I use nth-last-child(2) to achieve it.
.item:nth-last-child(2) {
background-color: yellow;
}
It strange to me because nth-last-child of item suppose to be the second of the last item but it works and I got the result as I expect.
I found this helpful trick from CSS Trick
I wanted to give all of the child's div elements a background-color of parent div. But, as I see, child divs' style overwrite parent's style even though child's did not have that property. For example,
<!-- Parent's div -->
<div style="background-color:#ADADAD;">
some codes here...
<!-- child's div -->
<div style="position:absolute;font-size:12px; left:600px;top:100px;">
again some codes...
</div>
</div>
In here, If i delete the style of child div, it works fine. I think my problem may be solved if i did the same thing with external css file also. But, I have already done hundreds of divs exactly like this. So, is there anyway to force parent's style to child style, just for background-color?(new in css)
But, as i see, chid divs' style overwrite parent's style even though child's did not have that property.
No, they just don't inherit the value by default, so they get whatever value they would otherwise have (which is usually transparent).
You can (in theory) get what you want with background-color: inherit. That has problems in older versions of IE though.
Use css selectors like this to make the background of child div's inherit from their parent:
Parent's div
<div id="thisparticulardiv">
some codes here...
child's div
<div class="childrendiv">
again some codes...
</div></div>
CSS:
#thisparticulardiv {
background-color:#ADADAD;
...
}
#thisparticulardiv div {
background: inherit;
position:absolute;
font-size:12px;
left:600px;
top:100px;
}
Use the inherit property on the child div :
background:inherit
<div style="position:absolute;font-size:12px; left:600px;top:100px; background:inherit">
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