CSS selector - how to select the first and last div

Question

I am having trouble choosing 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 create only the id1 div header without explicitly selecting it using the id div. I tried using the div: first-child selector, but all divs are 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 select all div stream elements that are the first child.

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

Instead, you need to select the direct child of the div (using the direct child combinator > ). This will only select the div element, which is the direct child of .portlet-dropzone , if it is the first child.

Example here

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

As the name suggests, if you also want to choose the latter:

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 is also worth noting that there are :first-of-type and :last-of-type , which will select the first / last element by type (as opposed to :first-child / :last-child , which will select only by index, not by 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 can be useful if there are elements of different types, and you want to target only div elements. For example, if there was a random element h1 before the first div , as in the example above, the first div will be selected.