CSS - 선택자

🧐 기본 선택자

1. 전체 선택자 = *

문서의 모든 요소에 스타일을 적용할 때 사용

* {
	margin: 0; /*문서의 전체에 margin과 padding을 0으로 설정*/
        padding: 0;
  }

 

2. 타입 선택자

특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용

p {
    font-style: italic; /*모든 텍스트 단락의 글자를 이탤릭체로 표시*/
}

 

3. 클래스 선택자 = .

특정 클래스를 사용한 요소에 스타일을 적용할 때 사용

스타일을 적용하고 싶은 태그 안에 class="클래스명"으로 설정한 후 스타일을 적용할 수 있다.

.accent {
    padding: 5px; /*accent라는 클래스를 가진 요소에 패딩값 설정*/
}

 

4. id 선택자 = #

클래스 선택자와 동일하게 특정 id를 갖는 요소에 스타일을 적용할 때 사용

클래스 선택자와 다른 점은, 클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면,

id 선택자는 문서에서 한 번만 적용할 수 있다.

#container {
    border: 1px solid #000; /*container라는 id를 가진 요소에 테두리 적용*/
}

 

5. 그룹 선택자 = ,

여러 요소에 같은 스타일을 적용할 때 사용

같은 스타일을 적용하고 싶은 요소를 쉼표로 연결하여 사용한다.

h1, h2 {
    text-align: center; /*h1, h2의 문서들을 가운데 정렬*/
}

 

🧐 연결 선택자

1. 하위 선택자

부모 요소에 포함된 하위 요소를 모두 선택한다

상위 요소와 하위 요소를 공백으로 구분하여 사용한다

section p {
    color: blue; /*section의 하위 요소인 p 요소를 모두 파란색으로*/
}

 

2. 자식 선택자 = >

자식 요소에만 스타일을 적용한다

하위 선택자는 자식 뿐만 아니라 손자 요소까지 적용되지만, 자식 선택자는 자식요소만!

section > p {
    color: blue; /*section의 자식 요소인 p에만 색깔을 파란색으로*/
}

 

3. 인접 형제 선택자 = +

형제 요소 중에서 첫 번째 동생 요소에만 스타일을 적용한다

같은 레벨이면서 가장 먼저 오는 요소에만 적용된다

h1 + p {
    color: blue; /*h1의 형제인 p 요소들 중에서 첫 번째 p만 파란색으로*/
}

 

4. 형제 선택자 = ~

모든 형제 요소에 스타일을 적용한다

h1 ~ p {
    color: blue; /*h1의 형제인 모든 p 요소들을 파란색으로*/
}

 

🧐 속성 선택자

1. [속성]

해당 속성이 있는 요소를 선택

a[href] {
    font-weight: normal; /*a 요소들 중에서 href 속성이 있는 요소에만 글꼴 굵기 설정*/
}

 

2. [속성 = 값]

지정한 속성값이 있는 요소를 선택

a[target = _blank] {
    padding: 30px; /*target 속성의 값이 _blank인 요소에만 패딩값 설정*/   
}

 

3. [속성 ~= 값]

지정한 속성값이 포함된 요소를 선택

속성값이 정확히 일치하는 경우에만 선택 (값으로 button을 주면 buttons와 같은 요소는 선택되지 않음)

[class ~= button] {
    border-radius: 5px; /*class가 button인 요소들의 모서리를 둥글게*/
}

 

4. [속성 |= 값]

지정한 속성값이 포함된 요소를 선택 (하이픈 포함)

속성값이 정확히 일치하거나 하이픈으로 연결된 경우에만 선택

a[title |= us] {
    color: blue; /*a 요소 중 title이 us거나 us-로 시작하는 요소를 파란색으로*/
}

 

5. [속성 ^= 값]

지정한 속성값으로 시작하는 요소를 선택

a[title ^= us] {
    color: blue; /*a 요소 중 title이 us로 시작하는 요소를 파란색으로*/
}

 

6. [속성 $= 값]

지정한 속성값으로 끝나는 요소를 선택

a[href $= hwp] {
    color: blue; /*a 요소 중 href이 hwp로 끝나는 요소를 파란색으로*/
}

 

7. [속성 *= 값]

지정한 속성값의 일부가 일치하는 요소를 선택

값이 어느 위치에 있든 값이 포함되어 있기만 하면 선택

[href *= us] {
    color: blue; /*href 속성값 중에 us가 어디든 포함되어 있다면 파란색으로*/
}