How do you give a <p> tag element inside a third <div> tag element in an HTML source code a background color in using CSS Selectors?
You can use the :nth-child() selector for this.
.container div:nth-child(3) p {
color: red;
}
<div class="container">
<div>
<p>Hello</p>
</div>
<div>
<p>I'm</p>
</div>
<div>
<p>Bob</p>
</div>
</div>
Related
How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
This question already has answers here:
How can I correctly select the first or the last child with CSS?
(2 answers)
Closed 3 years ago.
I am not fully understanding the behaviour of some css pseudo class selectors.
Looking at this simple html template:
<body>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
</body>
I do not understand why the following css would actually apply the style to the first div:
div:nth-child(1){
color: red;
}
and the following css won't apply the style to the last div:
div:nth-last-child(1){
color: red;
}
As far as I understand the nth-child selector will find the target, look for his parent and select the nth-child corresponding to the target.
Thanks for your help.
Andrea
The problem with div:nth-last-child(1) is that the last div is not the last child.
Some IDEs, such as jsFiddle, insert a script element in the document tree.
That script element is being targeted by :nth-last-child(1), which doesn't care about element type. It only looks at siblings.
You have to either:
get rid of the script element
use div:nth-last-child(2)
use div:nth-last-of-type(1)
jsFiddle demo
It does select the last div. But the HTML structure you posted is not a ' real ' one.
Where you test i bet there are some other elements that are siblings to those divs. Like <script> <footer> etc. So there is no nth-last-child(1) with the tag div inside body
So this works.
div:nth-child(1) {
color: red;
}
div:nth-last-child(1) {
color: red;
}
<section>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
</section>
But if you have another element after the last div, it won't work because now the div is the second to last element, not the last.
div:nth-child(1) {
color: red;
}
/* this doesn't work */
div:nth-last-child(1) {
color: red;
}
/* this works */
div:nth-last-child(2) {
color: red;
}
<section>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
<h1>
Hello there
</h1>
</section>
I need to change the color of the text which is not the immediate element of the target element.
It is the child of another parent div. How do I target an outer element through css?
In the demo you can see another text' color changes on mouse over ofdiv1 span, likewise I want to change the color of div2 span
In my code, how can I target the div2's span (not the the div2 coz there will be many other elements inside div 2)?
PS - Need to target a child element of another parent from another parent element's child element.
HTML
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
Demo
If you only want to use CSS, you have to assign the :hover to .div1 in order to select .div2 in your hover (as you can not select a parent in CSS):
.div1:hover .another_txt {
color: red;
}
.div1:hover + .div2 span{
color: red;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
You can use JavaScript / JQuery for this. To my knowledge you cannot achieve it in CSS.
HTML:
<div class="div1">
<span id="hover">hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>
JS:
$(document).ready(function() {
$("#hover").hover(function() {
$("#target").css("color", "red");
})
})
Here is the live demo: https://jsfiddle.net/vf8ab8yh/1/
To target the span in the div2 when div1is hovered use the following CSS selector:
.div1:hover+.div2 span{
color: pink;
}
Demo:
.div1:hover+.div2 span{
color: pink;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
<div>Don't change this</div>
</div>
The best you can do is to wrap the span in another wrapper (you can also not wrap it,your choice) then use the ~ selector.
The use of ~ is to select all the second element (.div2) preceded by the first element (.newDiv). You can read more from here.
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
.newDiv:hover~.div2>span {
color: pink;
}
<div class="newDiv"><span>hover me</span></div>
<div class="div1">
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
css selectors
.div1:hover~.div2 {
color: red
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
I want to add specific style property on all child elements of this .feature-section-heading class. I know i can do that using below trick
.feature-section-heading > h1 {...}
But above logic will implement on just h1 tag. So is there possible that i can add style property on all child elements? I searched about that and find accepted answer, but it does not work.
Use a universal selector instead of a type selector.
.feature-section-heading > *
CSS
.feature-section-heading > * {...}
You can use the * as all element selector.
You Can use * (Asterik Selector)
Here is the Demo
CSS
.foo *{background:red}
HTML
<div class="foo">
<span>1</span>
<p>2</p>
<div>3</div>
</div>
Access All childrens with Css * selector as in code snippet below:
.feature-section-heading > * {
background: red;
}
Please find the jsfiddle link that illustrates the desired behavior.
HTML
<div class="feature-section-heading">
I am parent div
<br />
<h1>
Heading
</h1>
<div>
Child DIV
</div>
<div>
Child DIV
</div>
<p>
Child paragraph
</p>
<p>
Child paragraph
</p>
<p>
Child paragraph
</p>
<span>
Child span
</span>
</div>
CSS
.feature-section-heading {
color: red;
}
.feature-section-heading > :not(:empty){
color: darkgreen;
}
I want to know if there's ability to change CSS of element that is not direct child or sibling of element hovered.
<style>
.one:hover .two {
color:red;
}
</style>
<div>
<div class="one">
111
</div>
</div>
<div class="two">
222
</div>
http://jsfiddle.net/hgd0drky/
Unless you add a parent element to both and make them have Child / Sibling relationship it is not possible purely based on CSS.
You will need javascript, however to demonstrate how easy this can be, I shall make up CSS
http://jsfiddle.net/hgd0drky/1/
<div class="one">
<div >
111
</div>
<div class="two">
222
</div>
</div>
CSS
.one:hover div {color:red;}
.one:hover .two {color:red;}
Which is just an extension of your code.