I have this code on a login page:
<div id="header">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I'd like to select div#navigation but only when it follows div#header that contains div#homeBanner. The reason is I have similar code on a different page:
<div id="header">
<div id="siteBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I don't want to affect the style of div#navigation when it follows div#header that contains div#siteBanner. Does this make sense?
How do I select div#navigation only when it follows div#header that contains div#homeBanner? I thought it was:
div#header div#homeBanner > div#navigation
... but that doesn't seem to work.
Problem here is that you're trying to select the sibling of a parent element based on the parent's child, which isn't possible in CSS.
Your best bet is to add a class to #header (or even body) based on that information then make use of that class.
For example:
<div id="header" class="home">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
With this selector (as mentioned by others, use + for siblings, not > for children):
#header.home + #navigation
Please try the following code:
div#header + div#navigation
Use the + for sibblings.
Related
I'm not sure this is possible, though I've found some similar examples but they're not quite what I'm looking for (found on here and CSS Tricks).
I know :only-child exists, but it needs to be more like "only two children".
So what I have is the below, where I want to hide the third div .controls when only 1 .child-item exists.
<div>
<div class="child-item">
<div class="child-item">
<div class="controls"> // Hide only if 1 child item exists
</div>
I know it's very easy in Javascript, but this is a short term fix on a site that will be getting an overhaul next year and I don't have access to the codebase, just a CMS where I can inject my own CSS.
Thanks in advance for any thoughts or suggestions.
you could hide the .controls element only if the previous sibling is both the :first-child and it has a .child-item class
.child-item:first-child + .controls {
display: none
}
.child-item:first-child + .controls {
display: none
}
<div>
<div class="child-item">child item 1</div>
<div class="child-item">child item 2</div>
<div class="controls">controls</div> <!-- visible -->
</div>
<hr />
<div>
<div class="child-item">child item 1</div>
<div class="controls">controls</div> <!-- not visible -->
</div>
So basically I've got a setup that spits out the code in the following fashion..
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
</div> //close for the parent class
Now what I'm trying to do is to style "TARGETCLASS" that comes above one way and the "TARGETCLASS" that comes second in another way. I tried n-th child, but unable to achieve the result I'm looking for. There's no way to add additional classes or ID to the existing "TARGETCLASS" class. Otherwise I wouldn't be posting this question :)
Also, the "subparent" class also is same. for both the targetclass classes. That's the issue
Thanks in advance for taking your time to answer this question for me.
Cheers!
Looks like you've got some mal-formed tags in your html. And nth-child should work just fine. Also, make sure you place the nth-child selector on the subparent class, and not TARGETCLASS. It's common to mis-place the child selector. Try this:
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">
first-child
</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">
second-child
</div>
</div>
</div>
<style>
.parent .subparent .TARGETCLASS {
background-color:#f00;
}
.parent .subparent:nth-child(1) .TARGETCLASS {
background-color:#0f0;
}
</style>
fiddle: https://jsfiddle.net/8ejxokuj/
I would use nth-of-type selector like so:
.parent{}
.parent > .subparent {} //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the second subparent
The nth-of-type() selector enables you to style a specific element amongst a series, in this case we targeted the second .subparent then specified the child we needed.
I hope this helps!
It seems, it is working by the nth child.
it is about how childrens are called. Not like "Ask parent to find nth child, but ask child, how far is he from parent"
.parent .subparent:nth-child(1) {background: #FEE; color:RED;}
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">aaa</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">bbb</div>
</div>
//close for the parent class
</div>
I'm having trouble using css selector. I would like to select all class "container", that are not in a parent "nav" :
<body>
<nav>
<div class="container"></div>
</nav>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
...
</body>
Is this possible using css selector ?
SOLUTION : the solution (thx Noah) : :not(nav) > .container {/** out your v=css here */}. This work if .container is direct child of nav element.
:not(nav) > .container
Note that this won't work if the container isn't directly within the nav, but there are ways around that.
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}