web Language/css

3. css3 선택자 기본

wooweee 2023. 5. 11. 15:18
728x90

1. 선택자 개요

 

선택자 종류 선택자 형태
 
전체 선택자 *
태그 선택자  tag
id 선택자 #
class 선택자 .
후손 선택자  선택자 선택자
자손 선택자  선택자 > 선택자 
property 선택자 선택자[property=value]
선택자[property~=value]
선택자[property|=value]
선택자[property^=value]
선택자[property$=value]
선택자[property*=value]
동위 선택자 선택자 + 선택자
선택자 ~ 선택자
구조 선택자 선택자:first-child
선택자:last-child
선택자:nth-child(수열)
선택자:nth-last-child(수열)
형태 구조 선택자 선택자: first-of-type
선택자: last-of-type
선택자: nth-of-type(수열)
선택자: nth-last-of-type(수열)
반응 선택자 선택자: active
선택자:hover
상태 선택자 :checked
:focus
:enabled
:disabled
링크 선택자 :link
:visited
문자 선택자 ::first-letter
::first-line
::after
::before
::selection
부정 선택자 선택자:not(선택자)

 

2. 문자열 속성 선택자

  • 전혀 중요치 않다 - 나중에 찾아보기 귀찮아서 기록한 것 정도 뿐
선택자[property~=value] 특정 값을 단어로 포함하는 tag 선택 (-으로 연결된 단어 하나로 인식)
선택자[property|=value] 특정 값을 단어로 포함하는 tag 선택 (-으로 연결된 단어 따로 인식)
선택자[property^=value] 속성 안의 값이 특정 값으로 시작하는 태그
선택자[property$=value] 속성 안의 값이 특정 값으로 끝나는 태그
선택자[property*=value] 속성 안의 값이 특정 값을 포함하는 태그

 

3. 후손 선택자, 자손 선택자

 

 

  • 해당 계층의 관련된 모든 것을 선택 한다.

 

3.1. 후손 선택자

  • 주의점
    • #header h1, h2 {} : #header의 후손인 h1 모두와, 일반 h2 를 선택
    • #header h1, #header h2 {} : #header의 후손인 h1 , h2 를 선택

 

  • 후손 뿐만이 아니라 다른 것들도 위와 같이 여러개 적용시 주의를 해줘야한다.
    • 쉽게 파악하기 위해서 , 마다 한개의 line으로 두고 각 line 별로 개별 동작한다고 이해하면 실수를 줄이기 쉽다.

 

 

  • 예시
#header h1,
h2 {
...
}

#header h1,
#header h2 {
...
}

 

3.2. 자손 선택자

  • table tag는 그냥 자손 선택자 사용하지 말 것

 

4. 동위 선택자

선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B를 선택(1개 or 0개)
선택자A ~ 선택자B 선택자A 뒤에 위치하는 선택자B 선택

 

  • 후손 자손과 달리 동일 위치의 tag들끼리 상관관계
  • 선택자A + 선택자B : 바로 뒤에 해당 tag 존재하지 않으면 0개 해당 tag 존재시 1개

 

+ 바로 뒤에 있는 경우, + 바로 뒤에 없는 경우, ~ 전혀 신경 안씀

 

// +
<!-- 바로 뒤에 해당 tag 존재할 않을 경우 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  
  <style>
    div + h1 {
      color: red;
    }
  </style>
  
  <body>
    <div class="abc">
      <div></div>
      <h1>h1</h1>
      <h1>h1</h1>
      <h1>h1</h1>
    </div>
  </body>
</html>

<!-- 바로 뒤에 해당 tag 존재하지 않을 경우 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  
  <style>
    div + h1 {
      color: red;
    }
  </style>
  
  <body>
    <div class="abc">
      <div></div>
      <h2>h2</h2>
      <h1>h1</h1>
      <h1>h1</h1>
      <h1>h1</h1>
    </div>
  </body>
</html>

// ~
<!-- 바로 뒤에 해당 tag 존재할 않을 경우 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  
  <style>
    div ~ h1 {
      color: red;
    }
  </style>
  
  <body>
    <div class="abc">
      <div></div>
      <h1>h1</h1>
      <h1>h1</h1>
      <h1>h1</h1>
    </div>
  </body>
</html>

<!-- 바로 뒤에 해당 tag 존재하지 않을 경우 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  
  <style>
    div ~ h1 {
      color: red;
    }
  </style>
  
  <body>
    <div class="abc">
      <div></div>
      <h2>h2</h2>
      <h1>h1</h1>
      <h1>h1</h1>
      <h1>h1</h1>
    </div>
  </body>
</html>

 

 

5. 반응 선택자

선택자: active 클릭한 tag에 style 적용 - click을 유지해야함
선택자:hover 마우스를 올린 tag 선택

 

  • 동위선택자와 복합 사용 예시
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <style>
    div ~ h1:active {
      color: red;
    }
  </style>
  <body>
    <div class="abc">
      <div></div>
      <h2>h2</h2>
      <h1>h1</h1>
      <h1>h1</h1>
      <h1>h1</h1>
    </div>
  </body>
</html>

 

6. 상태 선택자

상태 선택자 :checked
:focus
:enabled
:disabled

 

  • 사용 가능 조건
    1. :checked
      • input type이  checkbox, radio에서 사용가능
    2. :focus
      • input || button 같은 느낌의 tag에서 사용 가능
    3. :enabled
      • input || button 같은 느낌의 tag에서 사용 가능
    4.  :disabled
      • input || button tag에 disabled property 설정시 사용 가능

 

  • select 도 가능할 듯하다.

 

  • html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <input type="text" disabled="disabled" />
    <input type="text" value="enabled" />
    <br />
    <button disabled>button-disabled</button>
    <button>button-abled</button>
    <br />
    <input type="checkbox" />
    <br />
    <input type="radio" />
  </body>
</html>
  • css
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input:enabled,
button:enabled {
  background-color: red;
}

input:disabled,
button:disabled {
  background-color: yellow;
}

button:focus,
input:focus {
  background-color: black;
}

input[type="checkbox"]:checked {
  transform: scale(2);
}

input[type="radio"]:checked {
  transform: scale(3);
}

예제: checkbox 클릭시 내용 사라지게 하기

 

 

7. 구조 선택자

 

  • 기준은 형제 관계
구조 선택자 선택자:first-child
선택자:last-child
선택자:nth-child(수열)
선택자:nth-last-child(수열)
형태 구조 선택자 선택자: first-of-type
선택자: last-of-type
선택자: nth-of-type(수열)
선택자: nth-last-of-type(수열)

 

8. 문자 선택자

  • 가상 요소 선택자로 :: 를 사용 
문자 선택자 ::first-letter (첫 글자 선택)
::first-line (첫 줄 선택)
::after (tag 뒤에 우치하는 공간 선택)
::before (tag 앞에 우치하는 공간 선택)
::selection (사용자가 드래그한 글자 선택)

 

 

9. 링크 선택자

  • 사용할 일 극히 드뭄
링크 선택자 :link (href 속성을 가지고 있는 a tag 선택)
:visited (방문했던 링크를 가지고 있는 a tag 선택)
  • css 적용 순서 알아두기
    1. link
    2. viesited
    3. hover : 반응 선택자
    4. active : 반응 선택자

 

 

10. 부정 선택자

 

부정 선택자 선택자:not(선택자)
  • 선택자를 반대로 적용
저작자표시 비영리 변경금지

'web Language/css'의 다른글

  • 현재글3. css3 선택자 기본

관련글

티스토리툴바