Select only the first and the last link in divs - html

Question

I have a structure like the following:
<div class="navigation_sub_item_background" id="sub_nav_2">
<div class="navigation_sub_item" id="2_1">
<a class="navigation__sub__link" href="?p=2_1">
<span>
Test 3
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_2">
<a class="navigation__sub__link" href="?p=2_2">
<span>
Test 4
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_3">
<a class="navigation__sub__link" href="?p=2_3">
<span>
Test 5
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_4">
<a class="navigation__sub__link" href="?p=2_4">
<span>
Test 6
</span>
</a>
</div>
</div>
And I want to select only the first link and the last link. I tried div.navigation_sub_item > a.navigation__sub__link:first-of-type but this selects all of the links.
Anyone a suggestion?

Answer 1

Selecting the first and last link
As your links are wrapped in div elements you'll need to select the first and last div and target the first or last a element within those:
.navigation_sub_item:first-child a:first-of-type {
/* The very first link. */
}
.navigation_sub_item:last-child a:last-of-type {
/* The very last link. */
}
Note that I've specified the first-of-type and last-of-type on the a elements themselves just in case more than one a element exists within your div elements. You may want to replace these with first-child and last-child if you do not care about other elements coming before or after them.
A special case for where only one element is present
I want them all, thats cool. But what should I do if there is only one .navigation__sub__link-element? then the :last-child rule will be applied but I want another rule to be used.
In that case you can override the specificity of these selectors by specifying both first-child and last-child:
.navigation_sub_item:first-child:last-child a {
/* This will override the above selectors. */
}
Or if you're not specifying :first-of-type or :last-of-type on your a elements, you could equally use the :only-child selector:
.navigation_sub_item:only-child a {
/* This will also override the above selectors. */
}

Answer 2

This should work.
.navigation_sub_item:first-child .navigation__sub__link {}
.navigation_sub_item:last-child .navigation__sub__link {}

Answer 3

Try to this demo example here used to first-child, last-child
.navigation_sub_item:first-child .navigation__sub__link,
.navigation_sub_item:last-child .navigation__sub__link{
// here style
}
.navigation_sub_item:first-child .navigation__sub__link{
color:red;
}
.navigation_sub_item:last-child .navigation__sub__link{
color:green;
}
<div class="navigation_sub_item_background" id="sub_nav_2">
<div class="navigation_sub_item" id="2_1">
<a class="navigation__sub__link" href="?p=2_1">
<span>
Test 3
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_2">
<a class="navigation__sub__link" href="?p=2_2">
<span>
Test 4
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_3">
<a class="navigation__sub__link" href="?p=2_3">
<span>
Test 5
</span>
</a>
</div>
<div class="navigation_sub_item" id="2_4">
<a class="navigation__sub__link" href="?p=2_4">
<span>
Test 6
</span>
</a>
</div>
</div>

Answer 4

You can select the first and last child in the following way
.navigation_sub_item:first-child .navigation__sub__link,
.navigation_sub_item:last-child .navigation__sub__link {
/*CSS rules*/
}
You can read more about CSS3 first-child and last-child selectors
by clicking on the links.

Answer 5

You should use :first-child and :last-child
.navigation_sub_item:first-child a,
.navigation_sub_item:last-child a {
color: red;
}
DEMO

Answer 6

Try this:
.navigation_sub_item:first-child .navigation__sub__link
and
.navigation_sub_item:last-child .navigation__sub__link
to cover your comment consider this:
.navigation_sub_item:first-child .navigation__sub__link{
font-weight: bold
}
.navigation_sub_item:last-child .navigation__sub__link{
color: blue
}
<div class="navigation_sub_item_background" id="sub_nav_2">
<div class="navigation_sub_item" id="2_4">
<a class="navigation__sub__link" href="?p=2_4">Test 6</a>
</div>
</div>

Answer 7

i think the best method and working for me
.div-selecter a:last-of-type { color:red;}