Is it possible to target also another element like in the example ?
click
<div id="AAA">some content</div>
<div id="BBB">some content</div>
Something like...
#AAA:target #BBB{color:red}
In this case, you could use the adjacent sibling combinator, +.
EXAMPLE HERE
#AAA:target + #BBB {
color:red
}
Depending on the markup, it might be better to use the general sibling combinator, ~. (example)
Related
It seems CSS is right associative, and unlike programming languages, you cannot influence this with parentheses.
I have this general structure:
<div>
<div class='pizza'></div>
</div>
<p>Select me! Select me!</p>
<div>
<div class="pizza">
<p>Do NOT select me!</p>
</div>
</div>
I can't figure out the selector for a <p> that follows a sibling <div> containing a <div class="pizza">.
I tried this but the right-to-left associativity of CSS does not yield what I want:
div > div.pizza + p
I know this isn't right.
Can someone offer a pointer?
Combinators, at least the ones that are currently available, can only express a relationship between exactly two elements. As you've correctly observed, you cannot change the associativity of combinators. Because of this, and the fact that there is no parent counterpart to the > combinator for child elements, it is not possible to construct a CSS selector that represents both
div > div.pizza
and
div + p
where the first div in each selector represents the same element.
This associativity issue can be solved using the proposed :has() pseudo-class, which provides you with a relative selector syntax within a functional pseudo-class, allowing you to construct such selectors as
div:has(> div.pizza) + p
where p is the subject of the outermost selector. The relative selector > div.pizza is scoped to the first div selector — essentially, this is a combination of both of the first two complex selectors above, with the :has() pseudo-class acting just like any other simple selector.
It is not known yet if this proposed feature will be implemented in CSS.
See my answers to these related questions for more info:
Are parentheses allowed in CSS selectors?
How do I select an element based on the state of another element in the page with CSS?
You can't (yet) select your chosen <p> using standard CSS selectors.
You can, however, deploy the axe CSS selector extension library which will enable you to write selectors in your stylesheet which select parents, ancestors, previous siblings and remote elements.
Here is an example:
p {
color: rgb(191, 191, 191);
}
.pizza < div + p {
font-weight: bold;
font-size: 24px;
color: rgb(255, 0, 0);
}
<div>
<div class="pizza"></div>
</div>
<p>Select me! Select me!</p>
<div>
<div class="pizza">
<p>Do NOT select me!</p>
</div>
</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
Further Reading on axe Selectors:
http://www.rounin.co.uk/projects/axe/axe2.html
Is there a way to target div.music only when the div a few more up has a class of success? The success class gets added dynamically so I only want to target div.music when .success exists in the DOM.
For example, I know that if .music was right below .success, I can do something like this:
.success + .music { styles here } using the adjacent selector. However, what if the two divs aren't adjacent to each other like this?
<div>
<div class="success"></div>
<div class="blah"></div>
<div class="blah"></div>
<div class="blah"></div>
<div class="music"></div>
</div>
Yes, use the general sibling selector: ~
.success ~ .music {
color:red;
}
jsFiddle example
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
<div class="parent">
<div class="firstChild"></div>
<div class="secondChild"></div>
<div class="thirdChild"></div>
<div class="fourthChild"></div>
<div>
I am trying to style fourthChildbased on if secondChild exists under parent
I thought the below would work but Chrome says no. I dont want to use nth child because the DOM could change based on our program, the below seems very flexible but I'm doing something wrong.
.parent .secondchild ~ .fourthchild
{
css stuff
}
It's the correct solution, you just wrongly named your classes in the CSS, you forgot the caps.
.parent .secondChild ~ .fourthChild
http://jsfiddle.net/LeBen/Y6QDr/
It's case sensitive!
Do this:
.parent .secondChild ~ .fourthChild
I have the following set up
.test div:first-child {};
<div class="test" id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
Somehow div#three inherits the first-child styles, even though it is not the first-child of div.test. Is this intentional by the browsers? Can someone explain this?
While #two is the first child of #one but #three isn't, #three is still the first child of #two. So both inner divs get the styles.
The descendant combinator (the space character) in your selector tells the browser to select any div in any level of nesting from .test, as long as it's contained somewhere within an element with that class. The :first-child pseudo-class says to only select an element if it's the first child of its parent, whatever that parent may be, not just the element represented on the left side of the combinator.
If you only want to target the first child of .test, use the child combinator >:
.test > div:first-child {}
Because > expresses a parent-child relationship, it is safe to imply that the parent concerned by div:first-child is represented by .test.
This is the intended behaviour. You need to write your CSS rule like this:
.test > div:first-child
The > ensures only the first child of the .test element is selected. Without it, any div that is the first child of any node within .test is selected.
Say i have this markup:
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
Now these divs are not necessarily next to each other in the markup, but could be spread throughout the page.
Can i target only the first occurrence of class "current" using CSS only, i'd ideally like to avoid using javascript (for now)?
Ie.
.current:first-child {
background: red;
}
I believe you're looking for something like this:
.current:nth-child(1){
background:red;
}
Should do the trick!
:first-child targets elements that are first children, not first occurrence of a given class. So this will target all elements with current class, that are first children. It can be all of them if they are in different places on a page or none at all.
It sounds like you may be looking for css3 selector first-of-type
As mentioned in these two answers (along with this new one), CSS3 doesn't bake in a pseudo-class that selects the first element of its class (unlike :first-of-type which selects by type).
You can always use :first-child if .current is guaranteed to be the first child of .group:
.group .current:first-child {
background: red;
}
But if it's not guaranteed to be, then based on your comments and the answer link, since they all share the same parent you can do this instead:
.group .current {
background: red;
}
.group .current ~ .current {
background: transparent; /* Or whatever your default is */
}
The general sibling combinator ~ ignores other elements that may not be .current. All these rules work in IE7+.
If they are spread throughout the page, you can not get what you need with pure CSS solution. Even with first-of-type unless the elements are on the same DOM level. Check the example to see that you can not select the elements.
On the other hand once I move the third .current to the same DOM level where I already have the second one, I get only the second item selected, as it's the first .current on this level.
On the other hand it's a very short one-liner in JS
Don't overcomplicate things ;)
If it's spread throughout the page, you can't target it with css.