How can I do something like this?
element + adjacent_element + element_to_style {
/* somestyle */
}
I want to style an element that's adjacent to the adjacent element.
EDIT:
This code works properly, I just forgot the . before the classnames. That's why it didn't work.
There is ~ general sibling selector. But is css3 so the browser support is limited.
Related
I have an element with a ng-list attribute. The very next sibling to this element is an <ol>. I want to write a CSS selector that selects this <ol>.
In other words, I want to write CSS that applies to an <ol> when the <ol> has an immediate previous sibling of [ng-list].
Possible?
It's called an adjacent sibling selector.
For starters, I would never ever write this CSS selector, you're tying to an angular attribute, it makes no sense. You should just give you OL a class.
[ng-list] + ol { /* rules here */ }
CSS doesn't have a 'previous element' selector yet.
Since you want to select the ol that immediately follows another element, use +, it will select only the specified element that immediately follows the former specified element.
In your case
[ng-list] + ol {
/* css rules */
}
Ref: 5.7 Adjacent sibling selectors
I can't get my head round why this first-child selector isn't working.
I've created a jsFiddle to show my code: http://jsfiddle.net/wDTvV/
Basically the following CSS rule isn't working:
.form-item-products:first-child {
display: none;
}
Does anyone know why? Have I screwed up my syntax for using pseudo selectors?
Thanks guys,
Rick
The first child is not a .form-item-products, but rather #product-guide-wrapper, so your selector won't match.
As SLaks has mentioned, there isn't a :first selector in CSS like jQuery's. Given your structure, however, you should be able to use #product-guide-wrapper + .form-item-products instead.
:first-child can only match the first child element of its parent.
In your example, that's #product-guide-wrapper.
Unlike jQuery, CSS does not have a :first selector.
We all know how the adjacent selector works (p+p), but I wonder if there's an option to style an element that appears just before the specified one? For example:
<p id="one"></p>
<p id="two"></p>
I would like to style the first element that appears just before the p#two. How to do this without JS?
In CSS4 it will be possible to specify the element to which the style applies (not just the last the last element in a selector). CSS Selector Level 4 So in the future this should work:
p! + p { /* your styles here */ }
However, as far as i know, no browser does support them right now.
What I want to do is something like:
#div_id > .some_class
{
}
I don't want to change the class everywhere. I only want to change the class if it in that particular div.
Is ther some other way to do that same thing?
You've already stumbled upon the answer yourself:
#div_id > .class {
/* CSS magic */
}
This selects .class if it is the direct descendant of #div_id. For all descendants regardless of depth, use the selector #div_id .class instead.
See also this JSFiddle.
Your question already contains the child combinator CSS selector and will target the elements with class .some_class that are children of the element with id div_id, so if you have only one <div> with an id of div_id then it will only target the child elements with the class some_class. So it should work as already expected, except in IE6 of course which does not support that selector natively.
If you want to select grandchildren, use the descendant combinator.
Child combinator body > p
Descendant combinator body p
You essentially have the answer there. If you want to modify all classes with in a div then the selector would be div#id .this_class. If it's just one instance of the class inside the div (say you have a div called 'test' with three divs with a class of 'test_class' then you could either use the :nth-child() selector or the :first-of-type selector.
Your code looks fine to me. Note that the > operator will only affect the children of the DIV not any lower decendants (i.e. grandchildren). Remove the > to affect everything inside the DIV with the class .some_class.
I'm currently doing this using Javascript, however, I was wondering if it's possible to select a certain child of an unordered-list and then its immediate sibling, using CSS.
Example with 4 list-items:
ul.tab li:hover + (the next sibling that follows the current hovered one) {
}
You want the adjacent sibling selector for which you amusingly basically have the syntax already.
Be advised: :hover is specifically a x-browser problem in Safari though.