INDEX

1. 요점
2. 요소선택자
3. ID 선택자
4. Class 선택자
5. 선택자의 중첩 사용
6. 선택자 묶음
7. 후손선택자
8. 기본적인 우선 순위와 중복 사용

요점

• 요소 선택자 - ‘p’와 같은 기본적인 태그를 선택.
• id 선택자 - ‘#id’로 표현, 해당 아이디를 가진 요소를 선택.
• class 선택자 - ‘.class’로 표현, 해당 클래스를 가진 요소들을 선택.
• 선택자 중첩 - ‘p.class’ 처럼 띄어쓰기 없이 선택자를 붙여쓰면 중첩된 선택자에 모두 해당되는 요소들만 선택.
• 선택자 묶음 - ‘a, img’ 처럼 콤마(,)를 이용하여 여러 선택자들을 묶어서 선택
• 후손 선택자 - ‘p a’ 처럼 띄어쓰기를 통해 상속 관계를 명시하여 선택
• 같은 단계의 선택자가 중복이 될 경우, 아래쪽에 입력된 선택자를 우선
• 더 많은 단계를 가진 후손 선택자가 우선
• 다른 단일 선택자보다 id 선택자가 우선

요소선택자

• h1, img, p, div 등등 요소 명을 적어서 나타내는 선택자

• 예시

  • 만약 해당 요소의 id 속성 값이 ‘abc’라면 ‘#abc’로 표현

  #abc{
  	color: red;
  }
  

ID 선택자

• id속성을 가진 요소를 선택하는 선택자

• id이름 앞에 #을 붙여 표현함

• 예시

• • 만약 해당 요소의 id 속성 값이 ‘abc’라면 ‘#abc’로 표현

• #abc{
  	color: red;
  }
  

Class 선택자

• class 속성을 가진 요소를 선택하는 선택자.

• class 이름 앞에 .을 붙여 표현함

• 예시

• • 만약 해당 요소의 class 속성 값이 ‘abc’라면 ‘.abc’로 표현

• .abc{
  	color: red;
  }
  

선택자의 중첩 사용

• 요소 선택자와 id, class 선택자는 중첩되어 사용 가능

• 예시

• • 만약 HTML문서에 ‘box’라는 class속성을 가진 요소들 중에서 p요소에만 스타일을 주고 싶다면, 다음과 같이 붙여 쓸 수 있음

    p.box{
    	color: red;
    }
    

  • 요소 이름과 클래스 이름이 띄어쓰기 없이 붙여 쓰여야됨

  • ID선택자 역시 마찬가지. 만약 ID속성을 가진 p요소에만 스타일을 주고 싶다면 ‘p#box’라고 사용하면 됨.

    • 다만 id속성은 페이지 내에 단 한번만 선언되기 때문에 이와 같은 선택자를 쓸 일은 많지 않을 것

선택자 묶음

• 만약 h1와 div, p 요소 모두에 빨간 글자 색을 주고 싶다면, 다음과 같이 작성해야함

  h1 {
      color: red;
  }
  div {
      color: red;
  }
  p {
      color: red;
  }
  

• 하지만 쉼표를 이용하면 선택자를 한번에 묶어서 스타일을 줄 수 있음.

  h1, div, p {
      color: red;
  }
  

• 이는 class 선택자나 id선택자 모두 사용 가능

  .abc, p, #box, h1, a {
      color: red;
  }
  

후손선택자

• 관계를 나타내는 선택자

• 선택자 관계를 뜨이쓰기로 표현

• 예시

• • .box2요소 안에 있는 .name요소를 선택하라

    .box2 .name{
        color: red;
    }
    

• 후손선택자 역시 쉼표로 묶을 수 있음

  .box1 .name, .box2 .name{
      color: red;
  }
  

기본적인 우선 순위와 중복 사용

• 같은 순위의 선택자일 경우, 나중에 나온 스타일을 우선함.
• 더 많은 단를 나타낸 후손 선택자가 적은 단계보다 우선함
• 다른 단일 선택자들보다 아이디 선택자가 우선함.

.box1 {
	color: red;
}
.box1 {
	color: blue;
}

• 나중에 선언된 스타일을 우선함
• 파란색으로 표현됨

#side-box {
  color: red;
}
div {
  color: blue;
}

• id 선택자다 우선 순위가 높으므로 div#side-box 요소는 빨간 글씨로 표현

p {
    font-size: 12px;
    color: red;
  }
  div p {
    color: blue;
  }

• ‘div p’선택자는 글자색만을 담고 있기 때문에 ‘p’의 글자색만을 덮어씌움