http://jsfiddle.net/xw0vvo9e/4/
I'm attempting to set a background color for my navBar. As you can see in the jsfiddle, I have:
div .navBar {
width: 100%;
height: 45px;
background-color: #FF0000;
top: 0px;
position: fixed;
}
and it doesn't work. However, if I remove it, and change the HTML to:
<div class="navBar" style="background-color:#FF0000;">
it works just fine. I've been scratching my head on this for quite some time now.
You should remove the space in your selector, i.e. it should be div.navBar. Your current selector which is a descendant combinator selector tries to find .navBar descendants of the div elements. As the .navBar element doesn't have any div parents/grandparents the selector fails to select the target element.
Related
I know that there does not exist a CSS parent selector, but is it possible to style a parenting element when hovering a child element without such a selector?
To give an example: consider a delete button that when hovered will highlight the element that is about to become deleted:
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
By means of pure CSS, how to change the background color of this section when the mouse is over the button?
I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).
If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)
Note that <img> tag (for example) doesn't do the trick.
Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.
div.parent {
pointer-events: none;
}
div.child {
pointer-events: auto;
}
div.parent:hover {
background: yellow;
}
<div class="parent">
parent - you can hover over here and it won't trigger
<div class="child">hover over the child instead!</div>
</div>
Edit:
As Shadow Wizard kindly noted: it's worth to mention this won't work for IE10 and below. (Old versions of FF and Chrome too, see here)
Well, this question is asked many times before, and the short typical answer is: It cannot be done by pure CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.
But in most circumstances where this effect is wished, like in the given example, there still is the possibility to use these cascading characteristics to reach the desired effect. Consider this pseudo markup:
<parent>
<sibling></sibling>
<child></child>
</parent>
The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!
Now, how to style the sibling?
When the child is hovered, the parent is too, but the sibling is not. The same goes for the sibling. This concludes in three possible CSS selector paths for styling the sibling:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
These different paths allow for some nice possibilities. For instance, unleashing this trick on the example in the question results in this fiddle:
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
Obviously, in most cases this trick depends on the use of absolute positioning to give the sibling the same size as the parent, ánd still let the child appear within the parent.
Sometimes it is necessary to use a more qualified selector path in order to select a specific element, as shown in this fiddle which implements the trick multiple times in a tree menu. Quite nice really.
Another, simpler "alternate" approach (to an old question)..
would be to place elements as siblings and use:
Adjacent Sibling Selector (+)
or
General Sibling Selector (~)
<div id="parent">
<!-- control should come before the target... think "cascading" ! -->
<button id="control">Hover Me!</button>
<div id="target">I'm hovered too!</div>
</div>
#parent {
position: relative;
height: 100px;
}
/* Move button control to bottom. */
#control {
position: absolute;
bottom: 0;
}
#control:hover ~ #target {
background: red;
}
Demo Fiddle here.
there is no CSS selector for selecting a parent of a selected child.
you could do it with JavaScript
As mentioned previously "there is no CSS selector for selecting a parent of a selected child".
So you either:
use a CSS hack as described in NGLN's answer
use javascript - along with jQuery most likely
Here is the example for the javascript/jQuery solution
On the javascript side:
$('#my-id-selector-00').on('mouseover', function(){
$(this).parent().addClass('is-hover');
}).on('mouseout', function(){
$(this).parent().removeClass('is-hover');
})
And on the CSS side, you'd have something like this:
.is-hover {
background-color: red;
}
In 2022:
This can be now achieved with CSS only, using the :has pseudo-class and the following expression:
div:has(button:hover) {}
Here's a snippet showcasing the original proposition:
div:has(button:hover) {
background-color: cyan;
}
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
See browser support here. At the time of writing, all major browser support it—except Firefox, which still has a flawed experimental implementation.
This solution depends fully on the design, but if you have a parent div that you want to change the background on when hovering a child you can try to mimic the parent with a ::after / ::before.
<div class="item">
design <span class="icon-cross">x</span>
</div>
CSS:
.item {
background: blue;
border-radius: 10px;
position: relative;
z-index: 1;
}
.item span.icon-cross:hover::after {
background: DodgerBlue;
border-radius: 10px;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
}
See a full fiddle example here
This is extremely easy to do in Sass! Don't delve into JavaScript for this. The & selector in sass does exactly this.
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
I have read Is there a CSS selector for the first direct child only? and http://www.w3schools.com/cssref/css_selectors.asp
I guess I have to apply the effect to the first-child of the <h1> tag, but I couldn't get it to work. So instead, I'm trying to use the nth-child, but still no luck.
JSFiddle
<section>
<article>
<h1>Test Details</h1>
<ul>
<li>Layer This</li>
<li>Layer That</li>
<li>Layers</li>
</ul>
</article>
</section>
<section>
<article>
<h1>Campaign details</h1>
<p>Text</p>
</article>
</section>
CSS
section {
padding:30px;
}
section article {
background:#EBEBEB;
}
section article h1 {
background:#0C79CB;
padding:10px;
}
/* This is where I am struggling */
section article h1:nth-child(2):before {
background-color:white !important;
content:'';
height:10px;
display:block;
}
If you open the fiddle, you'll note that the header has a blue background, and the content has a grey background. All I'm trying to do is to 'insert' a line of white:
Current:
Desired (note white between the blue and grey)
Please note, I know this is quite trivial if I just add a new div with a class, or even add a border-bottom:solid 5px white; to the <h1> tag, the point is I'm trying to learn about CSS selectors so is this possible using CSS Selectors?
:first-child can be used with or without knowing the element type.
You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.
You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.
To complete the example you are attempting using pseudo elements:
It is possible to use :nth-child(1) to select the first child like :first-child. Note: In this example it is pointless, as you will only have one <h1> per <article>.
section article h1 is given position: relative and it's position: absolute children will be positioned in relation to it.
The :after is given position: absolute and width: 100% in order to create a line at the bottom of your <h1> background.
Remember that the :after and :before pseudo elements are the equivalent of:
<h1>
<span>This is the :before</span>
I am the heading
<span>This is the :after</span>
</h1>
Have an example
CSS
section article h1 {
background:#0C79CB;
padding:10px 10px 20px;
position: relative;
}
/*
-- Select the first h1 child of article and generate a pseudo element.
*/
section article h1:nth-child(1):after {
background-color:white;
content:'';
height:10px;
width: 100%;
display:block;
position: absolute;
bottom: 0;
left: 0;
}
In your example, you're trying to select the second child of the h1, but that element doesn't have any children, and so it fails. You have to select the second child of the parent of the h1
section article :nth-child(2):before
This has the advantage that you don't put any tag name in there, so it will work even if one day you'll change the h1 to an h2, for example.
That last selector could be rewritten also to
section article :first-child:after
It's not the same thing, but you can also add generated content after an element (and in your case it'll be fine and work in the same way).
Or, if you want to match something against the h1, you need to target its next sibling, using the sibling selector
section article h1 + *:before
This selector will choose the first element (whatever kind it is) that appears right after an h1.
Or, inserting generated content after the element, you can use this
section article h1:after {
background-color: white !important;
content: '';
height: 10px;
display: block;
}
Which, in my opinion, is the simplest thing to do
I have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue:
I encountered a scenario which confuses me - usage of :last-child affects how parent classes are applied.
What I have is a list of elements, and the goal is to apply some styles to the last element.
However, when I use :last-child, the priority of styles changes, and one of the parent classes stops working, only !important fixes the problem.
I made a simple demo here:
http://jsfiddle.net/wC2AX/1/
HTML:
<div class="hover">
<div class="focus_on_last_child" style="background-color:red; width:100px; height:100px">
<div class="attribution">
</div>
</div>
</div>
CSS:
/*this should be applied on hover always*/
.hover:hover .attribution{
background-color: black; /*try adding !important*/
bottom: 0px;
}
/*basic properties*/
.attribution {
height: 60px;
overflow: hidden;
position: absolute;
bottom: -60px;
width: 100px;
}
/*depending on a screen size styles are changed*/
.focus_on_last_child:last-child .attribution { /*try removing :last:child*/
background-color: pink;
bottom: -30px;
}
The example is a little bit stupid, the idea is on hover styles should be changed. But it works only when either !important is used or :last-child is removed.
Thanks for any suggestions!!
This is an issue of selector specificity.
Your first rule has two classes and a pseudo-class:
.hover:hover .attribution
And your last rule also has two classes and a pseudo-class (:last-child being that pseudo-class):
.focus_on_last_child:last-child .attribution
Since your two rules are equally specific, the one that comes later will take precedence. When you remove the :last-child pseudo-class, only the two class selectors remain and so the specificity of that rule is reduced, allowing your :hover rule to take precedence.
The simplest solution is to move your :hover rule underneath your :last-child rule, so that rule takes precedence and you won't have to make use of !important.
It's because:
.hover:hover .attribution{
Is more specific than:
.focus_on_last_child .attribution {
But if you would add .hover to it, it would be more specific, and will work:
.hover .focus_on_last_child .attribution {
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO