first-child not affecting the first element as expected [duplicate] - css

Question

This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 7 years ago.
Why does the rule not affect the first div? (with the "update 1" text)
.update div {
width:100%;
height:25%;
border-top:1px dashed {color:background title};
padding: 5px;
color:{color:links nav};
cursor:pointer;
}
.update div:first-child{
border:none;
}
.update div:hover{
color:{color:links nav hover};
}
.update div:hover > .symbol{
color:{color:links nav};
}
<div class="nav update">
<a><div><div class="symbol">×</div> update 1</div></a>
<a><div><div class="symbol">×</div> update 2</div></a>
<a><div><div class="symbol">×</div> update 3</div></a>
<a><div><div class="symbol">×</div> update 4</div></a>
</div>

Answer 1

There are no divs in your code that are the first child of the .update div. You'd need to do something like this:
.update a:first-child > div {
border:none;
}
Although HTML5 allows block elements like divs inside inline elements, I wouldn't do it myself. Perhaps consider spans instead.
To explain the "first child" concept a little more: in your code, each a element is a child of the .update div. The divs within those a elements are not children of the .update div; rather, they are children of the a elements. Each a element in your code only has one child div, though; and each of those child divs has another child div. So for an element to be a child, it must sit directly inside the parent element—one level down, as it were.

Answer 2

UPDATE
There are some mistakes:
The value of color is a name, 6 or 3 hexadecimal number, or RGB/RGBa, or HSL/HSLa
I've never seen {color:links nav} as a value before... is this actually working?
As #torazaburo and #Ralph.M pointed out, your divs qualify as first-childas well as first-of-type of a only, so your .update is not the direct ancestor (i.e. parent) of any div. Therefore you need more specificity by going through each level of the hierarchy.
div.update.nav
a
div
Try this:
.update a:first-child div:first-of-type
Note: In your circumstance first-child and first-of-type works the same, the difference I can think that might be of concern is if you use first-child and nth-child the n-th variable counts differently than nth-type-of.
The :first-of-type selector in CSS allows you to target the first occurrence of an element within its container.
.update div {
width: 100%;
height: 25%;
border-top: 2px dashed red; /* this is a color name */
padding: 5px;
background-color: rgb(0,0,0); /* this is RGB */
cursor: pointer;
color: rgba(250,250,250,.7); /* this is RGBa */
}
.update a:first-of-type div:first-of-type {
border: none;
}
.update div:hover {
color: hsl(240, 60%, 50%); /* this is HSL */
}
.update div:hover > .symbol {
color: hsla(324, 100%, 50%, .8); /* this is HSLa */
}
<div class="nav update">
<a>
<div>
<div class="symbol">×</div>update 1
</div>
</a>
<a>
<div>
<div class="symbol">×</div>update 2
</div>
</a>
<a>
<div>
<div class="symbol">×</div>update 3
</div>
</a>
<a>
<div>
<div class="symbol">×</div>update 4
</div>
</a>
</div>
See ARTICLE