CSS Selector - how to select the first and last div

Question

I am having trouble selecting the first and last div for the following html markup:

<div class="layout__side">
  <div class="portlet-dropzone">

      <div id="id1">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id2">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id1 div-->

      <div id="id3">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id4">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id3 div-->

      <div id="id5">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id6">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id5 div-->

      <div id="id7">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id8">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id7 div-->

      <div id="id9">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id10">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id9 div-->

      <div id="id11">
        <span></span>
        <div class="portlet-body">
          <div class="portlet-borderless-container">
            <div class="portlet-body">
              <article id="id12">
                <div class="inner">
                  <header>yoyoyoyoyoyoy</header>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div><!--end id11 div-->

  </div><!--end portlet-dropzone-->

</div><!--end layout__side-->

I am trying to select and style only the id1 div header without explicitly selecting it using the div id. I tried using the div:first-child selector, but all of the divs are being selected! This is what I tried, along with using nth-child(1)

.layout__side .portlet-dropzone div:first-child header{
    padding: 10px;
    border: 1px solid red;
}

Answer 1

The problem is that you're selecting all div descendant elements that are a first child.

In other words, the descendant div elements .portlet-borderless-container, .portlet-body, and .inner are selected (since they are descendants of .portlet-dropzone and they are the first child relative to their parent element). Since all the div elements are selected, each header element is thereby selected and styled.

You need to select the direct child div element instead (by using the direct child combinator, >). In doing so, only the div element that is a direct child of .portlet-dropzone will be selected if it is the first child.

Example Here

.layout__side .portlet-dropzone > div:first-child header {
    padding: 10px;
    border: 1px solid red;
}

As your title suggests, if you also want to select the last one:

Updated Example

.layout__side .portlet-dropzone > div:first-child header,
.layout__side .portlet-dropzone > div:last-child header  {
    padding: 10px;
    border: 1px solid red;
}

---

It's also worth pointing out that there are :first-of-type and :last-of-type pseudo classes which will select the first/last element by type (unlike :first-child/:last-child which will select based on the index only rather than the type).

Updated Example

.layout__side .portlet-dropzone > div:first-of-type header,
.layout__side .portlet-dropzone > div:last-of-type header  {
    padding: 10px;
    border: 1px solid red;
}

This may be useful if there are elements of varying types and you only want to target the div elements. For instance, if there was a random h1 element before the first div, like in the example above, the first div would still be selected.