CSS | 2. 선택자(2)

sojung·2021년 4월 2일
CSS
1

CSS

목록 보기
2/5
post-thumbnail
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="good">
      부모 good
      <div class="hi">
        자식 hi
        <div class="hi">후손 hi</div>
      </div>
      <div class="hi">
        자식 hi
        <div class="hi">후손 hi</div>
      </div>
      <div class="hiii">자식 hiii</div>
    </div>
    <div class="better">
      부모 better
      <div class="hi">자식 hi</div>
      <div class="hii">자식 hii</div>
      <div class="hiii">자식 hiii</div>
    </div>
  </body>
</html>

1. 연결 선택자

선택자와 선택자를 연결해 적용 대상을 한정하는 선택자

1) 하위 선택자

부모 요소에 포함된 모든 하위 요소에 스타일이 적용

상위요소 하위요소
.good .hi {
  background-color: #f8bbd0;
}

good 클래스 밑의 hi 클래스(자식 + 후손 모두)만 적용되었다.

2) 자식 선택자

두 요소 사이에 >(부등호)를 표시에 부모 요소와 자식 요소를 구분

부모요소 > 자식요소
.good > .hi {
  border: 2px dashed coral;
}

.good 클래스 밑의 자식 선택자 hi 클래만 적용되었다. 후손에는 테두리가 생성되지 않았다.

3) 인접 형제 선택자

같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용

요소1 + 요소2

같은 부모를 같은 요소1과 요소2가 있다. 요소1 바로 뒤에 오는 요소2에만 해당된다.

.hi + .hiii {
  background: #f8bbd0;
}

hiii를 갖는 클래스가 두 개이지만, .hi + .hiii 코드는 hi클래스 뒤에 오는 hiii 클래스를 의미하므로, hii클래스 뒤에 오는 hiii클래스는 해당되지 않는다.

4) 형제 선택자

형제 요소들에 스타일 적용
인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것

요소1 ~ 요소2

요소1과 요소2는 같은 부모를 갖고, 요소1 뒤에 오는 요소2를 선택한다. 이때 바로 뒤에 오지 않아도 된다.

.hi ~ .hiii {
  background: #f8bbd0;
}


hi 클래스 뒤에 오는 hiii 클래스가 모두 해당된다.

2. 속성 선택자

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
	...
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div>
      <a href="https://www.google.com" target="_blank" class="1 link">blank / 1 link</a><br>
      <a href="https://www.google.com" target="_self" class="link 2">self / link 2</a><br>
      <a href="https://www.google.com" target="_parent" class="link-3">parent / link-3</a>
    </div>
  </body>
</html>

1) [속성] 선택자

지정한 속성을 가진 요소를 찾아 스타일 적용

[href] {
  background-color: bisque;
}



2) [속성="값"] 선택자

주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

[target="_blank"] {
  background-color: bisque;
}



3) [속성~="값"] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

[class~="link"] {
  background-color: bisque;
}

html 코드를 보면 class가 각각 "1 link", "link 2", "a-link-3"이다.
[속성~="값"]은 정확히 "값"인 요소나 띄어쓰기(whitespace)를 기준으로 인식되는 단어에 "값"을 포함한 요소만을 선택한다. 따라서 "link-3"은 해당되지 않는다.

4) [속성 |= 값] 선택자

특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용
하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용

[class|="link"] {
  background-color: bisque;
}

정확히 "값"인 요소나 "값" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택한다.

5) [속성^=값] 선택자

특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

[class^="link"] {
  background-color: bisque;
}



6) [속성$=값] 선택자

특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용


7) [속성*=값] 선택자

값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

[class*="link"] {
  background-color: bisque;
}

3. 가장 클래스와 가상 요소

1) 사용자 동작에 반응하는 가상 클래스

:link 방문하지 않은 링크에 스타일 적용
:visited 방문한 링크에 스타일 적용
:active 웹 요소를 활성화했을 때의 스타일 적용
:hover 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
:focus 웹 요소에 초점을 맞추어졌을 때의 스타일 적용

2) UI 요소 상태에 따른 가상 클래스

:enabled, :disabled 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:checked 라디오 박스나 체크 박스에서 항목을 선택했을 때의 스타일 지정

3) 구조 가상 클래스

:nth-child(n) 앞에서부터 n번째 자식 요소에 스타일 적용
:nth-last-child(n) 뒤에서부터 n번째 자식 요소에 스타일 적용

위치를 나타날 때 an+b처럼 수식을 사용할 수도 있음. 이때 n값은 0부터

:nth-of-type(n) 앞에서부터 n번째 요소에 스타일 적용
:nth-last-of-type(n) 뒤에서부터 n번쨰 요소에 스타일 적용
:first-child 첫버째 자식 요소스타일 적용
:list-child 마지막 자식 요소에 스타일 적용
:first-of-type(n) 형제 요소들 중 첫번째 요소에 스타일 적용
:last-of-type(n) 형제 요소들 중 마지막 요소에 스타일 적용
:only-child 부모 요소 안에 자식 요소가 유일하게 하나일 때 스타일 적용
:only-of-type 자식이 유일한 요소일 때 스타일 적용

4) 그외 가상 요소들

:target 앵커로 연결된 부분(목적지)에 스타일 지정
:not 괄호 안에 있는 요소를 제외한 부분에 스타일 지정
:only-child 부모 요소 안에 자식 요소가 유일하게 하나일 때 스타일 적용
:only-of-type 자신이 유일한 요소일 때 스타일 적용

5) 가상 요소

::first-line 특정 요소의 첫번째 줄의 스타일 적용
::first-letter 특정 요소의 첫번째 글자에 스타일 적용
::before 특정 요소의 앞에 지정한 내용을 추가
::after 특정 요소의 뒤에 지정한 내용을 추가

profile
sojung
걸음마코더
이전 포스트

CSS | 1. 스타일 지정 방식 3가지

다음 포스트

CSS | 2. 선택자

0개의 댓글