This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 8 years ago.
I have a li list with 2 items in it, which are "RMS" and "RPM". When you rollover RMS the background changes and the RPM is targeted with the following to make the RPM element change to red. I need the same thing to work for the opposite side as well (rollover RPM and the background changes but RMS isn't targeted). I can't seem to get it to work for some reason.
li:hover + li#RPM {
background-color:red;
}
li:hover + li#RMS {
background-color: #CCC;
}
JSFiddle Demo
The + CSS selector looks for the next sibling as defined. There is no previous element CSS selector. You'll probably have to accomplish this using Javascript or jQuery.
Related
This question already has answers here:
How do I select an element only when inside another element?
(3 answers)
Closed 6 years ago.
when i use this:
b, strong { color: black;}
It applies to the whole website.
I want to set the black color only in a div named "div1", how can i do it?
my div's default class name is "sidereportleft", i've applied this code, but still not working:
http://pastebin.com/JA5JXuNe
Given that your div has a class of div1, you could do it easily by:
.div1 b,
.div1 strong {
color: #000;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I was wondering if there is a CSS-only way of styling an element based on it's child?
In my present situation, i've got an ul with a lot of li's in it. None of them have a separate identifying class, but only one of them got an iFrame (youtube video) inside of it. That li item, I want to style.
The CSS would somewhat be like
ul li:child-is[iframe] {
// styling
}
Is this possible?
Not today.
In the next occurrence of CSS, CSS4, you'll be able to precise the subject in a selector using an exclamation mark :
ul !li iframe {
// styling applies to the li element
}
but there's no pure CSS solution today.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is there a way to write css so it would select a div above a selector you already known.
For example.
#modal .container .login{
//style
}
so the above code will look for an ID of modal > classname of container > classname of login.
And style the .login.
Now is is possible to have it go the reverse. So style the #modal only if it has a child of .login and .container
Thanks
Short answer? no. (in the current CSS spec) as already answered here.
Is there a CSS parent selector?
but, I can give you a little trick.
create a special CSS rule (a class) with your special styling for the 'parent'.
then, with JQuery, on document.ready, check for all the elements in the DOM who meets your requirement (in your case: has a child of some class), and dynamically add the special CSS class.
It's not a perfect solution, but can be helpful in some cases.
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Is there some kind of .this selector in css?
Or maybe parent selector?
Thanks
There is no parent selector existing in CSS.
The only thing existing that comes somehow near to that is this:
a < img { border: none; }
But this is not a parent selector. This would select a tags but only if they contained an img tag.
There is no parent selector in CSS. See Is there a CSS parent selector?.
Why would you need a this selector? It would be redundant, because it implies you have already selected the target element.
well, I don't know if you mean this, but you can always start from the "parent" element, and then go deeper... e.g.
div#main_div div#sub_div1 div#sub_div2 span a {
/* your style here */
}
your style will then apply to the a-element. However, only if you have this order (sub_div2 has to be in sub_div1, which has to be in main_div) in your html code as well...