I have a situation where a style of purple font color with a light yellow background needs to be applied to all divs outside a div having a class of RadDiv.
This means all divs that are nested within the div with class of RadDiv should be excluded.
I tried using :not selector as shown below but it does not work. Demo of my situation
Question: How would I specify the :not selector to exclude a div with a class of RadDiv and all nested divs inside this div?
:not selector that does not work
div:not(.RadDiv) div {
background-color:lightyellow;
color:purple;
}
Complete code that I tried
<div>This is a div </div>
<div class="RadDiv newDiv outerDiv">
<div class="header">
This is the header
</div>
This is an outer div
<div class="alert highlight">
This div stands out
</div>
<div class="footer disclaimer">
This is the footer part
</div>
<table>
<tr>
<td>
<div>This is div inside a table element</div>
</td>
</tr>
</table>
</div>
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<style>
div:not(.RadDiv) div {
background-color:lightyellow;
color:purple;
}
.outerDiv {
border:1px solid red;
font-family:Arial;
}
.footer {
color:lightgray;
font-size:small;
font-style:italic;
}
.header {
font-weight:bold;
}
:not selector is not so powerful and it doesn't work the way you would like it to in more complicated situations. The easiest way to achieve what you want will probably be to override .RadDiv styles:
div {
background-color:lightyellow;
color:purple;
}
.RadDiv, .RadDiv div {
background: transparent;
color: black;
}
Treat all divs of the same level as siblings. Therefore, start by selecting the parent:
body > div:not(.RadDiv) {
background-color: lightyellow;
color: purple;
}
Using the child combinator (>), only one level is targeted, and the :not selector can be used to exclude any sibling (including its descendants).
Revised Fiddle
References:
6.6.7. The negation pseudo-class
8.2. Child Combinators
Related
why all elements were colored on red?
<div class="parent">
<span>1</span>
<p>2</p>
<h1>3</h1>
</div>
.parent:nth-child(1) {
color: red;
}
.parent:nth-child(2) {
color: green;
}
.parent:nth-child(3) {
color: blue;
}
I thought that the elements would be properly colored. span, p, h1 are the children of the element div?
.parent:nth-child(1) means "An element that is the first child of its parent and which is a member of the parent class".
It won't match the span, p or h1 because they do not have class="parent".
The inherit the red colour from their parent which does have that class and is the first child in its parent.
You need a child or descendant combinator in there:
.parent > :nth-child(1)
.parent :nth-child(1)
Here is my code
div p:first-child{
border-left: 5px solid #bdc3c7;
}
<div>
<h3>1 January 2018</h3>
<h1>This is my first Article</h1>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>
I want the first paragraph to have a left border. According to this MDN page, this can be done using first-child but mine doesn't work for some reason.
What's wrong with it?
The :first-child selector only selects the first child of its parent regardless of type. Your <p> is the third child of its <div> parent. To select the first child of a given type, use the :first-of-type instead:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
<div>
<h3>1 January 2018</h3>
<h1>This is my first Article</h1>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>
EDIT To clarify how :first-child works, when you say div p:first-child, you're not selecting the first p child of any div. You're still selecting the first child of any div, but only if that child happened to be p. So it is kind of additional restriction.
In the example below, I used a cyan background for :first-child. You can see that it got applied to the two titles even though they have different types. Then I used a red border for p:first-child. You can see that this time it only got applied to the second title because it is p, and it didn't apply to the first title because it is not p (i.e. it is h3):
div :first-child {
background-color: #0ff;
}
div p:first-child {
border: 1px solid #f00;
}
<div>
<h3>This is my first Article</h3>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>
<div>
<p>This is my second Article</p>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>
:first-child only selects elements that are the first child of their parents. Your <p> is the third child of your <div>, so it doesn't work.
Try using :first-of-type instead:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
You're close, but the <p> isn't the first child of the <div> -- the <h3> is, so the
<p> won't be selected by first-child.
Try it using nth-child:
div p:nth-child(3) {
border-left: 5px solid #bdc3c7;
}
<div>
<h3>1 January 2018</h3>
<h1>This is my first Article</h1>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>
The paragraph is not the first child.
Try with:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
Or, what is the same:
div p:nth-of-type(1) { ... }
You can either use div p:nth-child(3) or you can use div p:first-of-type either way it will work.
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
The :nth-child() CSS pseudo-class matches one or more elements based on their position among a group of siblings.
Documentation for :nth-child() here.
Documentation for :first-of-type here.
For using :first-of-type use:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
Or for using :nth-child(3) use:
div p:nth-child(3) {
boder-left: 5px solid #bdc3c7;
}
Here is my html code
<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>
And here is my css code
<style>
#id_1:hover #id_2{background-color:red;}
#id_1:hover #id_3{background-color:red;}
#id_1:hover #id_4{background-color:red;}
#id_2:hover #id_4{background-color:red;}
</style>
This hover is why not working ? Someone help me ?
I need when i hover #id_1, will change backgroundcolor #id_2
Because those divs are siblings so you need to use general sibling selector or ~
#id_1:hover ~ div
This will match all sibling elements of #id_1 with type of div, and you can use that instead of writing separate selector for each div
#id_2:hover ~ #id_4
This will match only sibling element of id_2 that has #id_4, if you only want to match div you can add div#id_4
#id_1:hover ~ div {
background-color: red;
}
#id_2:hover ~ #id_4 {
background-color: red;
}
<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>
If you just want to change color of next sibling element when you hover over #id_1 you can use adjacent sibling selector or +
#id_1:hover + div {
background-color: red;
}
<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>
You can use CSS attribute selector. More specifically, [attr^=value] which
Represents elements with an attribute name of attr whose value is
prefixed (preceded) by value.
and in your case it would be div[id^='id_']:hover.
As an example adapted from Andrzej GorgoĊ
div {
background: red;
width: 50px;
height: 100px;
float: left;
margin-right: 5px;
}
div[id^='id_']:hover {
background: blue;
}
<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>
This selector:
element1 element2
Works when element2 is child of element1
Your css is true when the #id_2 is a child of #id_1
You can change your code to this:
#id_1:hover + div{background-color: red;}
I'm trying to target the first instance of a .row directly in it's .page-container parent. I can't get the :first-of-type selector to properly target the first instance of .row.
.page-container > .row:first-of-type {
background: blue;
}
<div class="page-container">
<div class="row">Target This Row</div>
<div class="row">Don't Target</div>
<div class="row">Don't Target
<div class="row">Don't Target</div>
</div>
</div>
Please help me target only the first instance of .row that is a direct descendant of .page-container.
I ran across this issue relatively recently.
The issue is that :first-of-type specifically means first-of-this-type-of-element and it cannot (and does not) apply to classes.
In order to have a selector that applies to classes, we will need either a :first-of-class or a :first-of-query (which can select anything - including classes) - and, so far, neither exist.
Consequently you need something like this:
.page-container div:first-of-type.row
which means:
the first div nested inside .page-container - but only if it
also happens to have the class .row.
I think what you want is
.page-container > .row:first-child {
background: blue;
}
I usually ignore class or id all together and focus on the tag names, then if it's too broad, I narrow it down by adding class or id to parent.
div > div:first-of-type {
background: blue;
}
div.page-container > div:first-of-type {
border: 3px solid red;
}
p:first-of-type {
color: blue
}
p:last-of-type {
color: red;
}
<p>Example #1 in blue background</p>
<p>Example #2 in red border</p>
<div class="page-container">
<div class="row">Target This Row</div>
<div class="row">Don't Target</div>
<div class="row">Don't Target
<div class="row">Don't Target</div>
</div>
</div>
I want to style an object 2 when the user hovers object 1 in css. For Example:
<style>
.object1:Hover then style object2{
Styling of object2 Goes Here
}
</style>
how can i do that
You can do this in several ways, as long as the html element 1 and 2 fulfill some conditions:
Object 1 has to come before Object 2 in your markup (as you
cannot go "up" or "back" in css selectors).
Object 2 has to be reachable by a css selector from Object 1's perspective (again, you cannot go "up" or "back" in css
selectors), that means that Object 2 cannot for example be in a
parent context of Object 1 (which would also violate 1.).
Examples for such selectors:
1. Child selector
.object1:hover .object2 { your css rules here }
works for an html structure, where .object2 is a child element of .object1:
<div class="object1">
<div class="object2">Some content</div>
</div>
2. Adjacent sibling selector
.object1:hover + .object2 { your css rules here }
works for the (one!) immmediately following sibling .object2:
<div class="object1"></div
<div class="object2">This will be affected.</div>
<div class="object2">This will NOT be affected.</div>
3. All siblings selector
.object1:hover ~ .object2 { your css rules here }
will apply your style for all (possibly many!) sibling .object2 (but just as + NOT for child .object2):
<div class="object1">
<div class="object2">This will NOT be affected.</div>
</div>
<div class="object2">This will be affected.</div>
<someElementWhichisNotAffected></someElementWhichisNotAffected>
<p class="object2">This will be affected.</p>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div{
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 10px auto;
}
.div1:hover{
border: 2px solid #000;
}
.div1:hover ~ .div2{
background: #f00;
}
<div class="div1"></div>
<div class="div2"></div>