.outer a:not(:last-of-type) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
</div>
Is there a way, to target all <a>'s inside div.outer (I can't think of way to target the one inside ) container? The only workaround I can think of is css: .outer a:not(.last) and adding .last to last <a>. Any ideas? Background: The main idea why I'm doing this, is that I have elements, which line near edge of container, so each of them has to have margin of 10 from right, except last one. In this case, i don't have to type class margin-right-10 in each <a>, its just my own style I'm following.
If you number of levels inside .outer is known (or limited) you can extend selector like this:
.outer > * > a,
.outer > a:not(:last-of-type) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
</div>
The part .outer > * > a makes sure that deeper links are also included into matched set.
UPD. Version #2 that also takes into consideration situation when the nested links are the last:
.outer > *:not(:last-child) > a,
.outer > a:not(:last-child) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
<div>
Six
</div>
</div>
.outer > a:not(:last-of-type), .outer > div a
Works as well, but without changing your markup.
Related
I have the following code whereby I am trying to select one of the four .v-list__tile p elements depending upon what class the .v-list has attached to it but haven't been successful in using nth-child or nth-of-type correctly to target the first element I want. This is the markup:
<div role="list" class="v-list theme--light price">
<div role="listitem">
<div class="v-list__tile theme--light">
<p><strong>Price</strong></p>
</div>
</div>
<div role="listitem">
<div class="v-list__tile theme--light">
<p><strong>Timing</strong></p>
</div>
</div>
<div role="listitem">
<div class="v-list__tile theme--light">
<p><strong>Options</strong></p>
</div>
</div>
<div role="listitem">
<div class="v-list__tile theme--light">
<p><strong>Review/Submit</strong></p>
</div>
</div>
</div>
If the .v-list has a class of "price", I want only the first .v-list__tile p element to have styling attached to it. If the .v-list has a class of "timing", I want only the second .v-list__tile p element to have styling attached to it. Here's where I'm confused: I am actually able to select everything except the first p element with nth-child, but selecting the first child or nth-child(1) adds styling to all of the p elements instead of just the first one.
.price div:nth-child(1) p{
border-bottom:1px solid #009FD4; //doesn't work- selects *all* p elements//
}
.timing div:nth-child(2) p{
border-bottom:1px solid #009FD4; //works- selects only the second p element//
}
.options div:nth-child(3) p{
border-bottom:1px solid #009FD4; //works- selects only the third p element//
}
.review div:nth-child4) p{
border-bottom:1px solid #009FD4; //works- selects only the fourth p element//
}
How can I write out some css to target only the first .v-list__tile p?
You are telling css to find all divs inside the main div .price. And because all your divs inside .price contain another child div (v-list__tile) there is always a first div. When you target a 2nd or 3rd child, because there is no 2nd nor 3rd divs inside the divs with role: listitem then it all seems to work (but it's not). It was just chance that your structure was this one and that you had not more than one div at the end of your structure.
You will be able to achieve want you want If you target only the direct descender:
.price > div:nth-child(1) p{
border:1px solid #009FD4;
}
I hope this helps: https://css-tricks.com/child-and-sibling-selectors/
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
That means your first line will apply to all of your elements.
You could use this instead
.price .v-list__tile:first-child p {
border:1px solid #009FD4;
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
Despite limiting the :last-of-type to a certain div, when I add another div under that div, the :last-of-type class is suddenly canceled. Is there a reason why?
.container {
width: 400px;
border-bottom: 1px solid #111;
}
.container:last-of-type {
border-bottom: 0;
}
<div class="entry">
<div class="container">
{block:Posts} ....... {/block:Posts}
</div>
<div class="pagination">....</div>
</div>
Using this code, if I removed the .pagination div, the :last-of-type works normally and removes the border-bottom.But if I add the .pagination div, suddenly the :last-of-type doesn't work even though the .pagination div isn't included in the container class.
Is there a way to fix it? Or to select the last div of the .container div without having the .pagination class affecting it?
You’re selecting .container, not the last of its children. The form .container:last-of-type selects anything of class .container that is the last of its type. By inserting a space, which is the generic descendant selector, or a right angle bracket (>), which is the direct descendant selector, you’re now selecting the last of a given type within any element of class .container.
.container > :last-of-type
This may not be your best option, though. You should consider whether last-child makes more sense. For example, if you introduce elements of different a types at some point, the last of each type will be selected.
last-of-type refers to the element type (in this case div), not to the class, so it won't work the way you expect it, but will select the .pagination DIV, which is the last DIV inside the container element.
However, if the last .container div is always the second last DIV in there (only followed by the .pagination div, you can use :nth-last-of-type(2):
.container {
width: 400px;
border-bottom: 1px solid #111;
}
.container:nth-last-of-type(2) {
border-bottom: 0;
}
<div class="entry">
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="pagination">....</div>
</div>
I have specific type of boxes in my HTML that have, let's say margin: 10px; to all of them. They are displayed in a row on the page (using Bootstrap) and I want to remove the left margin of the first element and the right margin of the last element. I could use :first-child or :first-of-type and their respective lasts but the elements are not siblings and they do not have a common parent. The HTML looks something like this:
<div class='container'>
<div class='col-md-2'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
</div>
:first-of-type applies to all boxes, not sure how to approach the :first-child because of the nested divs. Any ideas?
It looks like you could use a combination of css selectors to achieve this, namely the > as well as :first-child and :last-child
:first-child > .MY-CUSTOM-BOX {
margin-left: 0;
}
:last-child > .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the direct MY-CUSTOM-BOX descendants of any first and last child elements.
That should work where the boxes have the same level of parent (i.e. container -> div -> MY-CUSTOM-BOX)
You could also do it the other way round which may give you better results depending on how nested you are:
.container > :first-child .MY-CUSTOM-BOX {
margin-left: 0;
}
.container > :last-child .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the first and last child of container and then gives any MY-CUSTOM-BOX elements inside it margin left/right of 0.
Here's a (relatively crude) fiddle demonstrating both examples: https://jsfiddle.net/ttakchr1/
I have this code.
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
.myDiv div:nth-child(odd) {
color: red;
}
.myDiv div:nth-child(even) {
color: blue;
}
I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?
Here's a JSFiddle.
There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to
.myDiv:nth-child(odd) div
...however this does not work either because of the <p>. A working solution with your sample is
.myDiv:nth-of-type(odd) div
http://jsfiddle.net/tvKRL/1/
NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.
You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.
On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:
div.myDiv:nth-of-type(odd) div {
color: red;
}
div.myDiv:nth-of-type(even) div {
color: blue;
}
Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.
This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.
In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.
Just applynth-childto the first member of the descendant selector, not the last one.
div:nth-of-type(odd) > div {
color: red;
}
div:nth-of-type(even) > div {
color: blue;
}
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
I have an html setup like this:
<div class = "myClass">
<div>
<a>Content</a>
<p><a>Content</a></p>
</div>
<p><a>Content to CHANGE!</a></p>
<p>Content</p>
</div>
I simply want to add 10px margin-top to the one labeled "Content to Change". This <p> is a direct child of class="myClass" I beleive and it's the FIRST one that is a <p>;
however this CSS style isn't working:
.myClass p:nth-child(1) {
margin-top: 10px;
}
OR
.myClass > p:nth-child(1) {
margin-top: 10px;
}
Anyone see why?
Because p is not the first child of .myClass. The <div> is. Use:
.myClass p:first-of-type
You may also want to use
.myClass > p:first-of-type
to select the child explicitly.