This question already has answers here:
How to apply CSS to only immediate children of a certain class
(3 answers)
Closed 3 years ago.
<div class = "node-master">
<div class = "node-1">
<div class ="node-content">
child content 1
</div>
</div>
<div class = "node-2">
<div class ="node-content">
child content 2
</div>
</div>
In example above, I need to target "child content 1" CSS class to apply a different font color. However, the caveat is I cannot target node-1 directly because of how the HTML is being generated (dynalist.io app).
The setting dictating "child content 1" CSS syntax is from node-master.
Basically, what I need to do is have a CSS class that uses node-master and applies its properties to the first child <div>
You can play with :first-child CSS selector, for example if you want to target the first div child of .node-master:
.node-master > div:first-child {
color: red;
}
You can use the :first-child pseudo selector on the parent:
.node-master div:first-child div.node-content {
color: red;
}
.node-content {
color: blue;
}
<div class="node-master">
<div class="node-1">
<div class="node-content">
child content 1
</div>
</div>
<div class="node-2">
<div class="node-content">
child content 2
</div>
</div>
this is the css to target elements without classes
.node-master > div:nth-child(1){background-color:red;}
.node-master > div:nth-child(2){background-color:blue;}
...
.node-master > div:nth-child(n){background-color:red;}
Hope this may help
Thanks.
You need to have each of the node-contents be unique for the css to appear
<div class = "node-master">
<div class = "node-1">
<div class ="node-content1">
child content 1
</div>
</div>
<div class = "node-2">
<div class ="node-content2">
child content 2
</div>
</div>
And then simply set the color property.
.node-content1 {
color: #1e00ef
}
.node-content2 {
color: #f44336
}
Here you go: https://jsfiddle.net/fvw3xhv8/
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
When we have this part of code:
<div *ngFor="element of elements1" class="element"></div>
<div *ngFor="element of elements2" class="element"></div>
And class Element:
.element {
color:red;
}
.element:first-of-type {
color:blue;
}
And we have two cases:
The first one is when the class element is global.
In this case just the first element of elements1 will be blue
The second one is when the class "element" is local.
In this case fist elements of both of the arrays will be blue
Why behavior in both cases isn't the same?
Try this:
<div
*ngFor="element of elements1; let first = first;"
class="element"
[ngStyle]="first && {'color': 'blue'}">
</div>
This will set the color only for the first div.
:first-of-type means "first of type" and not "first that matches the previous bit of the selector".
The class is irrelevent. The element type is div.
.element {
color: red;
}
.element:first-of-type {
color: blue;
}
<section>
<div class="element">This is the first div in the section</div>
<div class="element">
This is the second div in the section
<div class="element">This is the first div in the div</div>
<div class="element">This is the second div in the div</div>
</div>
<p class="element">This is the first p in the section</p>
<p class="element">This is the second p in the section</p>
</section>
first-of-type will get the element type using the class, so for example if the class is assigned on a p then the p should be the first of it's type to work so if there is any other p even from another class it will not detect it.
p:first-of-type {color:blue}
.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
check this also:
CSS3 selector :first-of-type with class name?
This question already has answers here:
Select element based on multiple classes
(3 answers)
Closed 3 years ago.
I have this html code
<div class="parent active">
<div class="child_1"></div class="child_1">
<div class="child_2"> some_text </div class="child_2">
</div>
How to select the div element of class child_2 when the parent is active using CSS selector?
I can select active parent using this:
.parent:active
I tried this but failed:
.parent:active > .child_2
.parent.active .child_2{
/*your style here*/
}
In your case, active is a class, so you should use class selector.
If you want to select a ele with class child_2 only under div having class parent and active then
.parent.active .child_2 {
}
Your selector is working correctly, as the active pseudo class, is up when you are clicking on that element, you can check it here, the child_2 element will turn red when you click it's container:
.parent:active > .child_2{
color: red;
}
<div class="parent active">
<div class="child_1">1</div class="child_1">
<div class="child_2">2</div class="child_2">
</div>
Now, what I think you are looking for, is the to select the child, when the parent has the class .active. And that is a completely different selector.
That is something like this: .parent.active > .child_2, as you can see the following example:
.parent.active > .child_2{
color: red;
}
<div class="parent active">
<div class="child_1">1</div class="child_1">
<div class="child_2">2</div class="child_2">
</div>
Try this.
.active .child_2 {
color: red;
}
<div class="parent active">
<div class="child_1"></div class="child_1">
<div class="child_2"> some_text </div>
</div>
This question already has answers here:
CSS selector for first element with class
(23 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
I've been trying to get my css to select the 'correct' first div but can't seem to isolate it. Here's my (stripped back, but correct) html:
<div id="page_container">
<div></div> // this div has content, but no id or class
<div class="holder"></div> // this div has content
<div class="section"></div> // <<<< this is the div I want to select; the first div with the class 'section'
<div class="section"></div> // I don't want to select other 'section's
<div class="section"></div>
<div class="section"></div>
</div>
CSS-wise, so far I have tried...
#page_container > div > .section:first-child {
...rules here
}
#page_container > div:first-child(.section) { // is this even valid?
...rules here
}
#page_container > div > div > .section:first-child {
...rules here
}
...without luck.
I may be experiencing a brain-fart, but how would I select just the first div with a class of 'section'?
Any help, much appreciated!
Try this.
#page_container .section{
background: green;
margin: 10px 0;
}
#page_container .section ~ .section {
background: transparent;
}
<div id="page_container">
<div>this div has content, but no id or class</div>
<div class="holder">this div has content</div>
<div class="section">this is the div I want to select; the first div with the class 'section'</div>
<div class="section">I don't want to select other 'section's</div>
<div class="section"></div>
<div class="section"></div>
</div>
You could use + Combinator.
Adjacent sibling combinator
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Example:
#page_container > .holder + .section {
background: red;
}
<div id="page_container">
<div>this div has content, but no id or class</div>
<div class="holder">this div has content</div>
<div class="section">this is the div I want to select; the first div with the class 'section'</div>
<div class="section">I don't want to select other 'section's</div>
<div class="section"></div>
<div class="section"></div>
</div>
This question already has an answer here:
Find tags using css selector but not their descendants
(1 answer)
Closed 7 years ago.
I'm quite new in css selectors and I'm trying to do this:
I have a html with multiple divs. I want to select the first div meeting some condition, let's say div[id*='ample'] and then, select all divs with the same condition, but not the first divs children.
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>
So the thing I want is to get the div whose id='example1' and id='example3'.
The best would be if for example the div with id='example3' doesn't have to be the first divs brother.
Do you know how to do that?
I was thinking about:
div = css_select("div[id*='ample')")
while True:
divs.append(div)
div = div + css_select("div[id*='ample')")
But it's probably worthless.
You have many ways to select elements in JavaScript, it's depends on the html.
Back to your question: you can do it by using the parent of those divs (the body for example)
NodeList.prototype.forEach = Array.prototype.forEach;
/* 'body > *[id*="ample"]' - you can replace the 'body' selector with other parent selector */
document.querySelectorAll('body > *[id*="ample"]').forEach(function(el) {
el.classList.add('red');
});
div {
height:10px;
border:1px solid #000;
}
.red {
border:1px solid red;
}
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>
Here is my html code ,
<div class="parent">
</div>
I am adding one div inside the parent div on runtime, It would be like this ,
<div class="parent">
<div class='child'>
</div>
</div>
Is there is any way to add style to child div using parent div ? Means can I do something like ,
<div class="parent" style="SET LEFT MARGIN FOR CHILD ELEMENT ">
</div>
So when child is added to parent div , the style will be automatically applied to child.
Based on specification — no, you can't.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515
You can't do this directly with inline css on parent div. But you can inherit styles from parent div like this:
CSS:
.child {
margin-left: inherit;
}
HTML:
<div class="parent" style="margin-left: 15px;">
<div class="child"> ... </div>
</div>
You can enclose the .child tags with i.e. < span > or < div > in this case, then set the inline CSS for the .parent tags, and then use "inherit" on the .child tag.
<div class="parent" style="color:yellow;">
<div class="child" style="color:inherit;">
</div>
</div>
The same was a successful solution applied to a similar problem I was facing regarding how the emails or links appeared inside a Gmail message body.
<div>
Hello <span style="color:yellow;">SomeMail#gmail.com</span>, we have just posted this on our website:
<br/>
Page Title of Website
</div>
I hope this offers a solution to your situation or at least inspires you closer to your preferred remedy.
Using the > for direct children:
.parent > div {
margin-left: 30px;
}
You can use this
<div class="parent">
<div class='child'>
</div>
</div>
CSS
.parent >.child {
margin-left: 30px;
}