how can I use the CSS selector to solve this [duplicate] - css

This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I have a problem with this code
<ul style="position: absolute; z-index: 999999999;">
<li>Home</li>
<li>music</li>
<li>cinema</li>
<li>shows</li>
<li>timeout</li>
<li>win</li>
</ul>
<div id="logo"></div>
I need to change the background position of the div#logo when hover on any "a"
tried this CSS selector with no luck
ul li a#hits_link:hover + div#logo{background-position:-198px 0px;}
Please Advice

You simply cannot do that, because #logo is not an adjacent sibling to #hits_link.
I have created a fiddle here to demonstrate what do you mean by adjacent sibling.
#logo is not related to #hits_link in any way, so AFAIK you will need the help of a js snippet to do something like that.
Using JQuery.. you can do something similar to this
$("#hits_link").hover(function() {
$("#logo").css("background-position", "-198px 0px");
},function() {
$("#logo").css("background-position", "0px 0px");
});
Here is a demo to that as well.
Update:
On that case, the second function is reverting the background position to 0 0.
use only this, if you want it to stay like that
$("#hits_link").hover(function() {
$("#logo").css("background-position", "-198px 0px");
});
Check demo

You can't. There's no selector that produces the behavior you want in CSS. Every CSS selector can only be used to affect an element and its descendants, not its siblings or any other totally unrelated element.
You'll have to use jQuery/JavaScript for this.
Example:
$("ul li a").hover(function() {
// When hovering, change the background-position of the #logo-element
$("#logo").css("background-position", "-198px 0px");
},function() {
// When mouse moves away, revert the background-position
$("#logo").css("background-position", "0px 0px");
});
I made you a fiddle. Treat it with care: http://jsfiddle.net/kMfWk/

Related

:not css selector is not working as expected [duplicate]

This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 3 years ago.
I want to apply some css on the basis of dir rtl attribute on body tag
My earlier implementation was below one which was not working
:not([dir="rtl"]) nav > ul > li:last-child a {
padding-right: 0;
margin-right: 0;
}
By mentioning body tag its working fine and I am not able to get the reason of same. Any help will be highly appreciated.
body:not([dir="rtl"]) nav > ul > li:last-child a {
padding-right: 0;
margin-right: 0;
}
:not([dir="rtl"]) will effect any element with no [dir="rtl"], means even if the body have it, if any of the elements inside will not have it it still will apply to the child li. Even if the element extend the style, it will apply to it, since its not have the attribute dir with the value rtl.
When you add the body selector, the css will apply only when the body not have this attribute, but if it have, the fact that other elements not have it will not effect.
Assuming you have a DOM structure like
<html>
<head></head>
<body dir="rtl">
<nav>
<ul>
<li>
<a>select me when not rtl</a>
</li>
</ul>
</nav>
</body>
</html>
then your rule will still see the <html> element as being :not([dir="rtl"]) and thus your rule will still be active, whatever the attribute value on your <body>.
console.log( document.querySelector(':not([dir="rtl"])') ); // <html>
The problem with your earlier version of the CSS is that the first part of the selector :not([dir="rtl"]) could match the <html> element instead of the <body> element, or any other intermediate container between the <body> and the <nav>, which probably has not the dir attribute set.

How to use the adjacent sibling combinator? [duplicate]

This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 8 years ago.
We're trying to control vertical spacing on content and have everything working great except when content follows a div - consider the following:
<div>
<ul>
<li></li>
</ul>
</div>
We'd like to remove top margin from all ul's that immediately follow a div so have been trying:
div + ul {
margin-top: 0;
}
Is this the proper use for this selector?
We just can't seem to get it working - any pointers in the right direction would be much appreciated.
Cheers
Ben
It has the word "adjacent" in it, this means "next to": your ul is not "next to" your div (on the same hierarchical level) but inside it.
What you want is a direct (not recursive) child selector, > so:
div > ul { ... }
And if it only happens to the first child of that div:
div > ul:first-child { ... }

How can I apply styling to parent element when child is in hovered? [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is this possible with css only? I have the following:
<div class="container">
<img src=#>
</div>
How do I get .container to have a box-shadow (and other styling) when and only when img is in the state :hover?
As people have stated there is no CSS parent selector, for a number of good reasons as stated in the linked duplicate question.
However, with the code you've shown, you can just apply the hover pseudo-selector to your parent element and it will achieve almost the exact same functionality.
So this:
div:hover{
border:1px solid red
}
Would work only because you have a single child, and would have the issue that if you hover adjacent to the img but not directly on it the parent will still have styles applied because its a block element.
You can convert it to inline-block to limit this, like so:
div{
display:inline-block;
}
div:hover{
border:1px solid red;
}
However, this will have implications for how other sibling elements to the parent flow.
You can use jQuery:
$("span").hover(
function () {
$(this).parent().addClass("add-class");
},
function () {
$(this).parent().removeClass("add-class");
}
);
Here is the demo http://jsfiddle.net/Sv6Av/
You can replace span with another tag such as img
Nope. No parent selector in css yet. You will have to resort to js for now. For more explanation read this

Two DIVs, same level, target only the first via CSS

I have the following structure:
<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>
I'd like to apply some CSS only to .div1, considering that it's on the same level as (not a children or parent of) .div2.
EDIT: To bring some light in the issue: The first div is actually my website's logo and the second div is a navigation that MAY or MAY NOT exist depending on the page viewed. If the navigation is present, I need to display the logo in a different manner (resize it).
CSS works as a cascade then you can never refer to elements based on what is next to them, just possible refer elements based on what was there before them.
The subjects of a selector are always a subset of the elements matching the last simple selector
For this you may need the help of Jquery:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
Since the class of both the divs are different, you can apply some specific rules to div1 by using class selector .div1
.div1 {
/* div1 styles */
}
Ah, so you want to apply css to div1 if div2 exists? CSS can't do that. You need JS. jQuery for example:
$('.div2').parent().find('.div1')
you can then apply the css directly or add another class ('div2exists') and add your style in your css-file
Though there's a way doing this in CSS, I personally would not recommend that.
It will only work if we assume we have a fixed number of div elements inside some ".container" div. And this number is 6, 2nd is the logo (also it is 5th counting from the end), 5th is the navigation.
.container {}
.container .logo {}
.container .navigation {}
.container div:nth-child(2):not(:nth-last-child(5)).logo {
width: 100px;
height: 100px;
}
.container div:nth-child(2):nth-last-child(5).logo {
width: 200px;
height: 200px;
}
The first rule is for the logo with navigation
The second rule is for the logo without navigation
Again don't do this, CSS is not designed for that.
You basically want to select a sibling, you will find a detailed post in this link CSS Tricks - Child and Sibling Selectors
.div1 ~ .div2{
Do your stuff here
}
This chunk will only take place if .div1 exists in your markup, is that what you wanted?
Edit:
I've noticed that your desired selector precedes the other one, this code will only work if the desired selector in this case .div1 is after .div2 .. CSS doesn't have that you will have to use jQuery

CSS link styling troubles

I've been making websites for years and theres on thing that really bugs me and confuses me.
I set a link style in the css file for a content div in my website and this successfully styles the links.
However if i create a span or div inside this div with a new link style i end up having to add in !important to various attributes which i can only tell by trial and error.
Is there any way around this or am I doing something wrong?
Thanks
My intuition is that you're having problems with your selector specificity.
Ensure that your new link selectors have a higher specificity than the ones in the enclosing element. Normally this would mean using a selector like div.outerdiv div.innerdiv a.class rather than just a.class etc.
For example:
<div class="outer">
<a class="outerlink" href="#">Outer Link</a>
<div class="inner">
<a class="innerlink" href="#">Inner Link</a>
</div>
</div>
If you use these selectors you may have trouble (depending on css ordering etc.):
a.outerlink { **css here** }
a.innerlink { **css here** }
Even if you use these selectors, it's not guaranteed to work how you want:
.outer a.outerlink {}
.inner a.innerlink {}
However, these selectors should work best, ensuring your innerlinks override attributes:
.outer a.outerlink {}
.outer .inner a.innerlink {}
Make sure you specify all the attributes you want to override in the .innerlink css.
Once you understand specificity, the power of the darkside will be yours.
I think I know what you are referring to, and I solve this problem by adding "a" after the inside span or div css rule.
Let's assume you have a general rule:
a
{
color:white;
}
If you want to override this rule in a div, you have to write
div a
{
color:yellow;
}
and not just
div
{
color:yellow;
}
This is because the link is inside the div, so the first rule is stronger than the third for links.

Resources