first-child not affecting the first element as expected

Question

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>

What is the expected result here? The code you've provided works properly in so far as none of the divs have a border but I suspect that's not what you want. — Shaggy, Nov 11 '15 at 08:25

ralph.m · Answer 1 · 2015-11-11T06:45:23.473

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.

edited Nov 11 '15 at 06:45

answered Nov 11 '15 at 06:31

ralph.m

13,468
3
23
30

But his CSS does not require that the divs be children of `.update`, only that they be descendants. – Nov 11 '15 at 07:48
@torazaburo I agree, but for some reason, I had to be more specific with `.update`'s descendants. The CSS selector `.update div` did not target any divs at all. In order to get any borders on the divs I used `.update a div`. Am I missing something? Is there something about a block inside an inline that changes selector behavior? Disregard, there was a typo 0_o – zer00ne Nov 11 '15 at 09:17
Disregard, there was a typo 0_o – zer00ne Nov 11 '15 at 09:24

zer00ne · Answer 2 · 2015-11-11T09:26:00.327

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

As the ARTICLE says, on the first sentence: > The `:first-of-type` selector in CSS allows you to target the first occurrence of an element within its container. — zer00ne, Nov 11 '15 at 07:58
But all the divs here are **both** first-child **and** first-of-type. — , Nov 11 '15 at 08:07

first-child not affecting the first element as expected

2 Answers2