css first child not wokring

Question

I have the following html

.resources .resource:first-child {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

<div class="resources">
  <h2 class="text-center">Ресурси</h1>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h3>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h3>
    </div>
</div>

the selector without the first-child works fine. But the first-child selector it's not wrking in my case. Can someone tell me why ?

Possible duplicate of [:first-child not working as expected](https://stackoverflow.com/questions/4505686/first-child-not-working-as-expected) — RïshïKêsh Kümar, Jun 07 '17 at 08:39

XCS · Answer 1 · 2017-06-07T09:10:43.097

Because that the .resource element that you want to stylize is the second child of it's parent, the first child is the h1 tag (careful, your heading tags were not properly closed).

You may be mistaken :first-child with :first-of-type.

:first-child only selects the .resource elements that are the first child within their parent container.
:first-of-type selects the .resource elements that are the first element matching the given selector (.resource) within their parent container, but not necessarily on the first-child position.

You can either use :nth-child(2) or :first-of-type, as in your case the element is the second child.

.resources .resource:nth-child(2){
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

<div class="resources">
  <h1 class="text-center">Ресурси</h1>

    <div class="resource">
      <h3>Минерали <span class="resource-quantity">3700</span></h3>
    </div>

    <div class="resource">
      <h3>Газ <span class="resource-quantity">500</span></h3>
    </div>
</div>

score 1 · Accepted Answer · answered Jun 07 '17 at 08:39

Use :first-of-type because it's second child of it's parent.

.resources .resource:first-of-type {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

<div class="resources">
  <h2 class="text-center">Ресурси</h2>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h4>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h4>
    </div>
</div>

score 0 · Answer 3 · answered Jun 07 '17 at 08:40

.resources .resource:first-of-type {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

<div class="resources">
  <h2 class="text-center">Ресурси</h2>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h4>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h4>
    </div>
</div>

css first child not wokring

3 Answers3