[CSS] CSS 선택자 (Selector)

CSS 구문(Syntax) 구조

CSS의 기본 구문은 다음과 같다.

 

selector { property: value; }

 

• selector(선택자)
  // 어떤 요소에 CSS rule을 지정할 것인지(Who)
• property(속성)
  // 선택한 요소에서 무엇을 변경할 것인지(What)
• value(속성 값)
  // 속성을 어떤 값으로 변경할 것인지(How)

 

CSS 선택자

CSS의 기본 선택자는 다음과 같습니다.

 

1. 전체 선택자(Univeral Selector)

    전체 선택자(*)는 말 그대로 모든 요소를 선택합니다.

* {
  color: red;
}

Class  vs  ID

id는 한 페이지(한 개의 html 파일) 당 한 번만 선언 가능하지만, class는 여러 번 선언할 수 있습니다. 

즉, 같은 id를 가진 요소는 존재할 수 없지만 같은 class를 가진 요소는 존재할 수 있기때문에 요소를 그룹화할 수 있습니다. 

또한 한 요소는 한 개의 id만 가질 수 있지만, class는 여러개 가질 수 있습니다. 

 

 

CSS 선택자 결합(Combining Selectors)

1. 그룹 선택자

• selector1, selector2 {   }
  // selector1과 selector2를 모두 선택

2. 복합 선택자

• selector1 selector2 {   }
  // selector1의 자손인 selector2를 선택 (selector2가 selector1 바로 아래에 있을 필요 없음)
  // selector1과 selector2 사이에 공백(space)을 작성해야 함
• selector1 > selector2 {   }
  // selector1의 자식인 selector2를 선택 (selector2가 selector1 바로 밑에 위치해야 함)

.class1, .class2 {
    color: red;
}
 
.class3 .class4 {
    color: blue;
}
 
.class4 > .class5 {
    color: green;
}

CSS 선택자 우선순위 (Priority)

id > class > tag(element) 순서로 우선순위가 높습니다.

 

예를 들어, 

<h1 id = "heading" class = "title">Hello</h1>

이라는 html 코드가 있고

 

h1 {

color: white;

color: black;

}

 

위와 같은 css 코드를 적용한다면 나중에 쓴 코드가 최종적으로 적용되므로 "Hello"는 검은색일 것입니다. 

거기에 다음과 같은 코드를 적용하면

 

.title { color: blue; }

 

클래스 선택자가 태그 선택자보다 우선순위가 높으므로 "Hello"는 파란색일 것입니다. 

 

#heading { color: red; }

 

마지막으로 위의 코드를 추가하면 id 선택자의 우선순위가 제일 높으므로 "Hello"는 빨간색으로 나타날 것입니다.