Selectors

CSS의 문법은 크게 두 부분으로 나누어 볼 수 있는데, Selector와 Declaration(선언)이다. selector에서는 스타일링을 할 요소를 선택하고 선언부에서는 그 요소에 적용할 스타일링을 구체적으로 작성한다. 지금까지는 선언부에서 사용되는 속성들과 그 값들에 대해 알아보았다. 이제부터는 우리가 스타일링 하고싶은 요소를 선택, 지정하는 문법에 대해 알아보자. 

 

selector {
  property: value; 
}

 

Type, Class, Id 

1. type | html 태그를 직접 선택
   •  p { background-color: #0066ff; } 
2. class | html 태그에 지정된 클래스를 이용해서 요소를 선택
   • 동일한 클래스를 가지고 있는 모든 요소에 같은 스타일링을 할 때 유용하게 사용
   • 하나의 요소는 띄어쓰기로 구분된 여러개의 클래스를 가질 수 있고, 이 때 클래스로 요소를 지정하는 방법은 아래와 같다. 
     •  <button class=" menu-btn cancel " type="button">Cancel</button> 
       •  .menu-btn{ width: 100%; } 
       •  .cancel{ width: 100%; } 
       •  .menu-btn.cancel{ width:100%; }  | 띄어쓰기 없이 두 class를 dot으로 연결하면, class가 menu-btn 이고 cancel인 요소를 지정할 수 있다.
3. id | html 태그에 지정된 id를 이용해서 요소를 선택
   •  #user-info { width:100%; } 
4. 여러 개를 한번에 작성하는 것도 가능 | .div.box.active,  #user-info.box 등

 

Child, Descendant, Siblings

이 때 child는 direct child를 말하고, descendant는 direct child 뿐만 아니라, 더 깊은 레벨로 중첩되어있는 모든 자식요소까지를 통틀어 말한다. 즉 descendant 안에 child가 포함된다. 

 

<section class="progress">
  <h1 class="progress-title fs-medium fw-regular">Loding...</h1>
  <ul class="progress-list" aria-hidden="true">
    <li class="first">
      <h1>title 1</h1>
      <p>contents 1</p>
    </li>
    <li class="second">
      <h1>title 2</h1>
      <p>contents 2</p>
    </li>
    <li class="third">
      <h1>title 3</h1>
      <p>contents 3</p>
    </li>
  </ul>
</section>

 

1. parent > child | section > h1
2. parent desecendants | section h1
3. sibling1 + sibling2 
   • .first + li | class가 first인 요소의 다음 형제 요소 중 li 태그인 요소를 하나만 선택
4. sibling1 ~ sibling2
   • .first ~ li | class가 first인 요소의 다음 형제 요소 중 li 태그인 요소를 모두 선택

 

Attributes

특정 속성을 가지고 있는 요소를 선택할 수 있다. 예를 들어 type 속성이 text인 input 요소를 모두 선택하려면 다음과 같이 작성할 수 있다.

•  input[ type = "text" ]{width: 100%;} 
•  a[ href *= ".com" ] { color: blue; } | href 속성 값에 ".com"이 포함되어 있는 모든 요소를 선택
•  a[ href $= ".com" ] { color: blue; } | href 속성 값이 ".com"으로 끝나는 모든 요소를 선택

 

Pseudo-classes :

pseudo classes는 어떤 상태(state)나 조건(condition)을 만족했을 때 사용할 수 있는 선택자를 말한다(pseudo-element와는 다름). 

Structural Pseudo-classes

1. element:first-child | 형제 요소로 이루어진 그룹에서 첫번째 요소를 선택
   • li:first-child | li 태그이자, 첫번째 자식인 요소를 선택, 위의 코드에서 클래스가 first인 li 태그가 선택된다
2. element:last-child
3. element:nth-child(n) | 형제 요소로 이루어진 그룹에서 n번째 요소를 선택 
   • li:nth-child(2)
   • li:nth-child(2n) | li의 짝수번 째 요소
   • li:nth-child(2n+1) | li의 홀수번 째 요소
   • 이 때 그룹에서 li가 첫번째 자식 요소이어야 한다. 
4. element:nth-of-type(n) | 똑같은 태그의 형제 요소 그룹에서 n번째 요소를 선택 
   • span:nth-of-type(3n) | span의 요소를 3의 배수 단위로 선택(3번째, 6번째, 9번째 span...)

nth-child VS. nth-of-type

 

User-action Pseudo-classes

사용자의 action에 따라 변하는 상태를 선택할 수 있다.

 

1. element:hover | 요소 위에 마우스를 올렸을 때를 선택 
2. element:active | 요소를 클릭하는 순간을 선택
3. element:checked | 선택된 라디오 버튼이나 체크박스를 선택
4. element:focus | 요소에 focus가 되었을 때(??? 입력가능한 상태?) 
   • input 계열 요소에서 주로 사용 

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

 

Priorities(선택자 우선순위)

1. ID
2. Class 
   • Pseudo-class도 여기에 포함
3. Type  

<p id="text" class="a b c d e f g">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ipsam
   accusantium obcaecati, veritatis assumenda quia et mollitia voluptatibus
   dignissimos soluta culpa? Quia, esse mollitia deleniti ad sapiente
   assumenda corporis illum!
</p>

#text {
  color: blue; 
}

.a.b.c.d.e.f.g {
  color: red; 
}

서로 같은 요소를 지정하고 있는데, 스타일링이 충돌하면 selector 우선순위에 의해 id 선택자를 이용한 color: blue; 스타일링이 최종 렌더링에 반영된다. 

 

+) Rule Breaker | 선택자 우선순위 규칙을 무시함, 피치 못할 경우에만 사용

• inline style | html 태그 내부에 style attribute를 이용하는 방법
  • id 선택자로 지정한 스타일링보다 높은 우선순위를 갖는다.
• !important 
  • inline style로 지정한 스타일링보다 높은 우선순위를 갖는다.
  • p { color: blue !important; }