선택자와 결합자(selectors & Combinators)

선택자

속성 선택자(Type Selector) : 특정 요소를 입력한 다음, 이에 관한 CSS 규칙을 추가하면 이를 특정 요소의 속성으로 추가할 수 있다

ID 선택자(ID Selector) : 특정 HTML 요소에 대한 ID 속성 및 ID 이름을 추가하여 생성할 수 있다. (’#id’를 사용)

그룹 선택자(Group Selector) : 여러 요소 유형을 함께 그룹화 할 수 있으며 선택자를 이용해 정의한 특정 CSS 규칙을 일괄적으로 적용할 수 있다.

클래스 선택자(Class Selector) : ID 선택자와 흡사하며 클래스를 HTML 요소에 속성으로 추가한 후 클래스의 이름을 정의하고 CSS에서 클래스 이름을 입력하며 ID 선택자는 고유성으로 인해 특정 요소에 대해 한 번만 사용할 수 있지만 클래스 ’.class’를 사용)

 

결합자

결합자는 서로 다른 선택자들을 결합하는 것이다.

 '후손 결합자 (Descendant Combinator)'는 '공백(space)'를 사용하여 표현하며

예를 들어,

div p {
color: blue;
}

와 같이 표현되며 이는 ‘<div>’ 요소 내의 모든 ‘<p>’ 요소에 스타일이 적용된다.

여기서, ‘<p>’ 요소는 직계 자식보다 더 아래인 후손까지 포함된다.

자식 결합자 (Child Combinator)

자식 결합자는 ‘>’ 기호를 사용하며

예를 들어,

div > p {
font-weight: bold;
}

와 같이 나타낼 수 있다. 이는 ‘<div>’ 요소의 직계 자식인 ‘<p>’ 요소에만 적용시킨다.