I can use the following to select all divs that are not the first div among their siblings.
div:not(:nth-of-type(1))
Is there anyway I can select all div's that are not the first two?
You can use sequential :not pseudos, so: div:not(:nth-of-type(1)):not(:nth-of-type(2))
http://jsfiddle.net/akm4qnds/
OR
Even better, you can use sibilings selectors... Like div:condition ~ div that will select every sibiling divs that are after the one with the condition.
So: div:nth-of-type(2) ~ div will select every div that comes after the second child.
http://jsfiddle.net/akm4qnds/1/
You can use multiple :not to exclude multiple items
Example
div:not(:nth-child(1)):not(:nth-child(2)) {
background: blue;
}
DEMO
It can even be dome more clear, without specifically writing out the not pseudo selector per element.
U can do this the get the same results:
:not(:nth-of-type(-n+2)) {
}
:not(:nth-child(-n+2)) {
}
I know its a late answer:P but maybe still usefull to somebody
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 8 years ago.
I'm trying to do a CSS selection.
I want to select an ID that's before another ID selector.
This is the example:
<div id="wrapper">
<div class="aside_left">Left content...</div>
<div class="main_page">Main content...</div>
</div> <!-- end of wrapper -->
My objective is that the main_page stay on the left, and the aside_left change its position to the right.
Both the aside_left and the main_page have the property float:left I can't change the aside_left property to float:right because it is in many pages.
Is it possible to select the ID or CLASS that is before another ID?
My selector should be something like this: select the .aside_left that are before an .main_page
You cant do this with CSS selectors per se.. your best bet is to use something like jQuery's very accessible .parent() method.
You can see here for CSS3 and here for CSS2, this is not present in the current spec.
The speculative design for CSS4 does provide such a selector using a ! operator, but is not presently supported in any browser.
With this in mind, perhaps think about changing the logic behind what you're trying to do- can you not give the altered elements different class names to more easily identify them? Or progress down from your wrapper element?
Or, have a look into the nth-of-type selector, by using:
#wrapper .aside_left:nth-of-type(odd)
See THIS FIDDLE
This will select only the .aside_left elements which are the first child of the #wrapper element. The first child, as in the first in the DOM, as opposed to the first displayed (using float may visually produce results that dont reflect actual DOM positioning in which case you're back to using jQuery).
Only if HTML Structure Cooperates is Pure CSS Possible
I noted in my comment and ExtPro has noted in his answer that such is not possible by pure css, at least under most conditions. However, there is one set of conditions that it is possible. That is if there end up being more child elements of #wrapper in the html when something other than .main_page is present. This would be a very specifc case requirement, and may not match your situation (probably not based off your comment to ExtPro), but if so, then this code works:
#wrapper > .aside_left:nth-last-of-type(2) {
float: right;
}
See an example fiddle here. You see how this requires that there be two elements only in the case that the .main_page is there, and would demand more elements be present if .main_page is not there. So this technically does not key in on .main_page itself, but rather is using the html structure to change a preceding element based off the number of sibling elements present.
in pure CSS you could use display:flex and order , despite position in the flow of .main_page : (hover it to see them both switching sides).
/* using your HTML */
#wrapper {
display: flex;
flex-flow: row wrap;
height:200px;
width:80%;
margin:auto;
}
#wrapper > div {
width:20%;
box-shadow:inset 0 0 1px;
order:2;
}
#wrapper .main_page {
width:80%;
}
#wrapper > div.aside_left {
background:gray;
}
#wrapper > div.main_page:hover {
order:1;
}
live démo at http://codepen.io/gc-nomade/pen/Iywbj see some tips to use it here : http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could as well reset direction on #wrapper if you style your 2 div as inl'ne-boxes and restore direction on the childs divs
I have a HTML structure:
<div class="home-view">
<div class="view-header">Header</div>
<div class="view-content">Content</div>
</div>
And I would like to style the first item of home-view. In this case, it's view-header, but sometimes there is no header and the view-content will be the first item in home-view.
The first item in home-view should get some styles.
I've been trying with .home-view:first-child, but no luck there since it's children have different class-names (I think). Any advice?
.home-view > *:first-child { background-color:red; }
...will select the first sub element of any type that is a first child.
Since both elements are divs you could specify the first div within .home-view
.home-view div:first-child{
background: red;
}
Working Example: http://jsfiddle.net/7cNZS/
.home-view > div:first-of-type{ background-color:red; }
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
More....
You responded to the previous answers that you only wanted the direct child elements to be styled, and not child elements below them.
So I'll adapt those answers and give you an answer that meets that requirement:
.home-view>div:first-child{
background: red;
}
The difference here is the > selector between .home-view and div instead of a space. This forces it to only select immediate children of .home-view, and not divs that are further down the tree, whereas a space between them would tell it to select any matching child elements down the tree.
Hope that helps.
Try this:
$('.home-view').children().eq(0);
Please check this fiddle - http://jsfiddle.net/vfMsS/. I need to write selectors which select the element after the "active" element and the element before it. The "before" part doesn't seem to work. How to select the element before the a.active?
Like BoltClock said, there is no way to due this in current day browsers.
However, I believe it is possible in CSS.
The CSS Selectors level 4 syntax (specifically see this) with the syntax E! + F for "An element E preceding an element F".
So in your case the syntax would be a! + a.active meaning "An element with tag a preceding an element with tag a and class active". As of today, this is not yet implemented in any layout engine
The adjacent sibling selector only looks forward, not backward. There is no - combinator for previous adjacent siblings.
If you simply need to select anything that isn't .active in the same parent, and you don't mind slightly reduced browser support, you can use :not() instead. If you need to specify a different style for the one that comes after .active, you need to override:
a:not(.active) { background:red }
a.active + a { background:yellow }
Again, this assumes they always share the same parent.
jsFiddle preview
I was looking for the same solution of targeting the elements behind the .activelink
I set a default style for any element before the one .active then I selected all after that one with the sibling selector.
a.active { background: #ccc;}
a.active ~ * { background: yellow }
a { background: red }
Demo: https://codepen.io/ramiro-ruiz/pen/gBOPQL
That worked for me, hope it helps.
Why don't you try using a sibling combinator?
a.active ~ a { background:red }
http://jsfiddle.net/VixedS/6x7d9vm7/
I have to say, this is an issue I had for a while, and one of the things I didn't like much ended up resolving this issue... float: right.
In my case, it was the input[type='radio'] + label element, and since CSS flows forward and not backwards, ~ input[type='radio'] + label would choose all the siblings after the element that was checked.
Since, float: right is responsible for taking "A, B, C" and positioning them as "C, B, A" - I changed the order of radio elements from 1-6 to 6-1 in the HTML, and made them float: right with CSS.
What this did was reverse them back into the order of 1-6 when rendered to the browser.
Now, when I used ~ input[type='radio'] + label, it still defined the styles the same way (which in my case, was the color of the label), however, the siblings being styled were now - visually - the preceding ones.
This thread is over a year old, but if anyone needs an example, I'll create and post a pen if asked.
Does anyone know if it's possible to define a CSS selector that selects the first image within a div, but only if it's the first child within the div.
In jQuery I would use a comparison something like this...
if ($('#div img:first-child') == $('#div>*:first-child')) {
...
}
By definition of "first-child", the selector (assuming your div had an id of div)
#div img:first-child
already does that. First image of any div is
div img:first-child
However, as BoltClock's answer points out, the child selector is needed if you may have img elements nested deeper in the div.
You don't need to do a comparison in jQuery if all you want to do is select that img. Just combine your two selectors like so:
#div > img:first-child
This works in both jQuery and CSS.
It's a simple CSS selector:
#div:first-child img:first-child
Imagine I have a div with a bunch of paragraphs nested inside, I want to select the second, fourth and seventh paragraph element.
I know you can use nth-child to select a nested element, but works for one only. This won't work;
nth-child(2,4,7)
How do I select multiple specific elements. Is this possible?
Thanks,
How about something like this:
p:nth-child(2), p:nth-child(3), p:nth-child(8)
{
background:#000;
}
read this article i hope this will help you :- http://css-tricks.com/how-nth-child-works/
you can use this method like mentioning below css so this will select every second paragraph.
p:nth-child(2n) {
background:red;
}
http://tinkerbin.com/8KzrmwdB