[가상 클래스] first-child, first-of-type - 요소 선택하기

first-child & first-of-type비교

• 대상:first-child는 대상 요소 형제중 대상 요소가 첫번째에 있을때만 선택
  
  ex) .test div:first-child{ color : red }          = is div tag first element in parent element? Yes!
       .test span:last-child{ color : blue }       = is span tag first element in parent element? No! label tag is last-child 
       .test label:last-child{ color : green }
  
  <div class="test">
     <div></div>
     <span></span>
     <label></label>
  </div>
  

 

• 대상:first-of-type는 대상 요소 형제중 대상 요소가 첫번째로 확인되는 요소 선택
  
  ex) .test div:first-of-type{ color : red }
       .test span:first-of-type{ color : blue }
       .test label:first-of-type{ color : green }
  
  <div class="test">
     <div></div>
     <span></span>
     <label></label>
  </div>

 

 

 

1.1 first(last)-child

• .inp_text span:first-child == .inp_text span이 첫번째/마지막에 있으면 요소선택가능
• .inp_text:first-child == .inp_text가 형제요소중 첫번쨰에 있어야 요소선택 가능
• must be first or last

 

1.2 first-child 가상클래스 선택

.inp_text span:first-child
{
    width: 50px;
    height: 50px;
    background-color: red;
}

.inp_text label:first-child
{
    width: 50px;
    height: 50px;
    background-color: blue;
}

 

1.3 last-child 가상클래스 선택

.inp_text input:last-child
{
    width: 100%;
    height: 50px;
    background-color: red;
}

.inp_text span:last-child
{
    width: 50px;
    height: 50px;
    background-color: blue;
}

 

 

 

 

 

2.1 first(last)-of-type

• .inp_text span:first-of-type == .inp_text요소의 자식중 첫번 째로 확인되는 span태그

 

2.2 first-of-type

.inp_text span:first-of-type{
    width: 100%;
    height: 50px;
    background-color: red;
}

.inp_text label:first-of-type{
    width: 100%;
    height: 50px;
    background-color: blue;
}

 

2.3 last-of-type

.inp_text div:first-of-type{
    width: 100%;
    height: 50px;
    background-color: red;
}

.inp_text div:last-of-type{
    border: 4px double blue;
}