CSS Seçici - İlk ve son div

Question

aşağıdaki html biçimlendirme için ilk ve son div seçerek sorun yaşıyorum nasıl seçileceğini: Ben seçmek çalışıyorum

<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--> 

ve stil sadece id1 div başlığı olmadan div kimliğini kullanarak açıkça seçerek. Div'u kullanmayı denedim: ilk çocuk seçici, ancak tüm div'ler seçiliyor! Bu (1)

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

Answer 1

sorun tüm div soyundan bir ilk çocuk olan elemanları seçmekte olduğunuzu olduğunu ben n'inci-çocuğu kullanarak birlikte çalıştığı şey budur. (Bunlar .portlet-dropzone soyundan ve onların ana elemanına birinci alt göre çünkü) Diğer bir deyişle

, soyundan div elemanları .portlet-borderless-container, .portlet-body ve .inner seçilir. Tüm div öğeleri seçildiğinden, her bir header öğesi seçilir ve stillenir.

Bunun yerine (direct child combinator, > numarasını kullanarak) div öğesinin doğrudan alt öğeyi seçmeniz gerekir. Bunu yaparken, ilk çocuksa, .portlet-dropzone'un doğrudan bir alt öğesi olan yalnızca div öğesi seçilecektir. Ayrıca son bir seçmek istiyorsanız Başlığınızın, anlaşılacağı gibi

Example Here

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

:

Updated Example

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

---

O olduğunu işaret de değer :first-of-type ve :last-of-type pseu İlk/son öğeyi tür (:first-child/'dan farklı olarak seçecek olan sınıflar), yalnızca türden ziyade dizine göre seçilecektir).

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; 
} 

orada değişen türleri unsurlardır ve sadece div unsurları hedeflemek isterseniz yararlı olabilir

. Örneğin, yukarıdaki örnekte olduğu gibi, ilk div'dan önce rastgele bir h1 öğesi olsaydı, ilk div hala seçilebilirdi.