CSS 선택자

CSS 규칙 전용 타겟이 되는 선택자 8가지 소개

핵심요약

일반 선택자 1~4번
일반 선택자의 우선순위
전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자

복합 선택자 5~8번

1. 전체 선택자

*{
    background: red;
    color: balck;
}

html 문서 내 모든 엘리먼트 선택해 스타일 규칙 적용
주로 모든 속성을 선택해 패딩이나 마진을 초기화 하는 용도

2. 타입 선택자

div, p{
    font-weight : bold;
    padding : 11px;
    color : blue;
}
div{
    background: red;
    color: balck;
}
p{
    padding : 10px
}

예시와 같이 태그명을 사용해 스타일을 적용함
여러 엘리먼트 동시사용 가능함
같은 엘리먼트에 여러가지 스타일이 동시에 적용된다면
가장 마지막을 기준으로 하거나 구체적인 규칙, !important가 우선 적용함

3. 클래스 선택자

.classname{
    background: red;
    color: orange;
}

classname 위치에 사용자가 지정한 클래스네임을 사용하고 앞부분에 .을 적어 적용함
동일한 클래스를 중복해서 사용가능하기에 여러가지를 묶어서 적용이 가능함

4. ID 선택자

.#targetID{
    background: red;
    color: cyan;
}

targetID 위치에 사용자가 지정한 id명을 입력하고 앞부분에 #을 붙여 적용함
일반 선택자 중 가장 우선순위가 높다

5. 하위 선택자

div div{
    background: red;
    color: cyan;
}

하위 선택자 사용법은 테그 테그 로 표현한다.
하위 선택자는 1단계 하위요소와 2단계 이상 하위요소에 스타일을 적용함

6. 자식 선택자

div > div{
    background: red;
    color: cyan;
}

자식 선택자 사용법은 테그와 테그 사이 >를 입력해 사용함
하위 선택자와는 다르게 1단계 하위요소에만 적용함

7. 인접 형제 선택자

div + div{
    background: red;
    color: cyan;
}

인접 형제 선택자의 사용법은 테그와 테그 사이 +를 넣어 사용함
인접 형제 선택자는 형제 관계 엘리먼트 중 첫 번째 엘리먼트에만 스타일 적용됨

8. 일반 형제 선택자

div ~ div{
    background: red;
    color: cyan;
}

일반 형제 선택자의 사용법은 테그와 테그 사이 ~를 넣어 사용함
인접 형제와는 반대로 형제관계인 엘리먼트가 여러 개 존재할때 모든 엘리먼트에 스타일 적용됨