본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

의사 클래스(pseudo-class)

by 오늘의갈비찜 2021. 4. 25.
728x90

의사 클래스(pseudo-class)

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다.

 

선택자:의사클래스이름 {속성: 속성값;} 

선택자.클래스이름:의사클래스이름 {속성: 속성값;}

선택자#아이디이름:의사클래스이름 {속성: 속성값;}

동적 의사 클래스(dynamic pseudo-classes) :link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)

ex)  a:link {color: orange;}
:visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.

ex)  a:visited {color: gray;}
:hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작함.

ex) a:hover {color: blue;}
:active 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작함.

ex) a:active {color: red;}
:focus 초점이 맞춰진 input 요소를 모두 선택함.

ex) div:hover { background-color: blue; color: white; }

ex) html
  <form>
     <input type="text" id="" name="" value="클릭해 보세요">
  </form>

css
    input { border: 3px solid #FFEFD5; transition: 0.5s; }

    input:focus { border: 3px solid #CD853F; } /클릭하면 0.5초 동안 테두리 칼라 변함 
상태 의사 클래스
(UI element states pseudo-classes)		 :checked 체크된(checked) 상태의 input 요소를 모두 선택함.

ex) <form>
       <input type="checkbox" id="" name="" value="html" checked="checked">
       <span>html</span><br>
       <input type="checkbox" id="" name="" value="css">
       <span>css</span><br>
       <input type="checkbox" id="" name="" value="java">
       <span>java</span>
    </form>  

css
span{margin-left: 5px;}
input{color: #ffefd5}                         /체크된 인풋을 선택하므로 실행되지 않는다.
input:checked + span {color: #cd853f} /체크를 하면 스판 칼라 변함
/체크된 박스의 칼라만 변함
:enabled 사용할 수 있는 input 요소를 모두 선택함.

ex) <form>
       <input type="checkbox" id="" name="" value="html" checked="checked">
       <span>html</span><br>
       <input type="checkbox" id="" name="" value="css">
       <span>css</span><br>
       <input type="checkbox" id="" name="" value="java" enabled="enabled">
       <span>java</span>
    </form>  
css
       span{margin-left: 5px;}
       input{color: #ffefd5}                         
       input:enabled + span {color: #cd853f} 
       /박스를 클릭하던 안하던 스판 칼라가 모두 변함
:disabled 사용할 수 없는 input 요소를 모두 선택함.

ex) <form>
       <input type="checkbox" id="" name="" value="html" checked="checked">
       <span>html</span><br>
       <input type="checkbox" id="" name="" value="css">
       <span>css</span><br>
       <input type="checkbox" id="" name="" value="java" disabled="disabled">
       <span>java</span>
    </form>  
css
       span{margin-left: 5px;}
       input{color: #ffefd5}                         
       input:disabled + span {color: #cd853f} 
       /disabled가 적용된 박스는 사용할 수 없지만 스판 칼라가 변했음, 나머지 박스들은 선택을 하여도 스판칼라가 변하지 않음
  :target 현재 활성화된 target 요소를 모두 선택함.
  :in-range 특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
  :out-of-range 특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
  :read-only readonly 속성을 가지는 input 요소를 모두 선택함.
  :read-write readonly 속성을 가지지 않는 input 요소를 모두 선택함.
  :required required 속성을 가지는 input 요소를 모두 선택함.
  :optional required 속성을 가지지 않는 input 요소를 모두 선택함.
  :valid 유효한 값을 가지는 input 요소를 모두 선택함.
  :invalid 유효하지 않은 값을 가지는 input 요소를 모두 선택함.
구조 의사 클래스(structural pseudo-classes) :first-child 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.

ex)
  <div class="first"> 
    <p></p>
    <p></p>
    <div class="second">
      <p></p>
      <p></p>
    </div>  
  </div>
css
    div.first{border: 3px solid #008000;}
    div.second{border: 3px solid #ffd700;}
  p:first-child { color: red; font-weight: bold; }
/첫번째 p 이므로  div.first, div.second의 첫번째p가 변함
:last-child 모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.

ex)
  <div > 
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
css
 p:nth-child(2n) { color: red; font-weight: bold; }
/2의 배수가 변함, 2번째 4번째 6번쨰 p태그가 변함
:nth-last-child 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.

ex)
  <div > 
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
css
 p:nth-last-child(3n) { color: red; font-weight: bold; }
/뒤에서 3의 배수가 변함, 1번째 4번째 p태그가 변함
:first-of-type 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.

ex)
  <div class="first"> 
    <p></p>
    <p></p>
    <div class="second">
      <p></p>
      <p></p>
    </div>  
  </div>
css
     p:first-of-type { color: red; font-weight: bold; }
/첫 번째로 등장하는 p 이므로  div.first, div.second의 첫번째p가 변함
:last-of-type 모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.

ex)
  <div class="first"> 
    <p></p>
    <p></p>
    <p></p>
    <div class="second">
      <p></p>
      <p></p>
      <p></p>
    </div>  
  </div>
css
        p:last-of-type { color: red; font-weight: bold; }
/마지막으로 등장하는 p 이므로  div.first, div.second의 3번째p가 변함
:nth-of-type 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.

ex)
  <div > 
    <p></p>
    <div></div>
    <p></p>
    <div></div>
    <p></p>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
  </div>
css
p:nth-of-type(2n) { color: red; font-weight: bold; }
2배수의 p 이므로, 
:nth-last-of-type 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.

ex)
  <div > 
   <p></p>
    <div></div>
    <div></div>
    <p></p>
    <div></div>
    <p></p>
    <p></p>
  </div>
css
p:nth-last-of-type(2n+1) { color: red; font-weight: bold; }
2*0+1=1, 2*1+1=3, 2*2+1=5
:only-child 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.

ex)
  <div > 
   <p></p>
  </div>
  <div>
    <p></p>
    <p></p>
  </div>
css
p:only-child { color: red; font-weight: bold; }
/외동 p만 선택
:only-of-type 자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.

ex)
  <p > 
  </p>
  <p>
    <p></p>
    <p></p>
  </p>
css
p:empty { width: 300px; height: 20px; background: red; }
:root 문서의 root 요소를 선택함.

ex) <h1>문서의 root 요소</h1>

 :root { background: red; }
기타 의사 클래스 :not(선택자) 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.

ex)
  <form>
     사용자 : <br>
     <input type="text" id="" name="username" >
     비밀번호 : <br>
     <input type="password" id="" name="password" >
     주소 : <br>
     <input type="text" id="" name="address" >
  </form>

input:not([type="password"]) { background-color: #CD853F; }
비밀번호 제외하고 사용자와 주소의 창 칼라 변함
:lang(언어) 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.

ex) <p>영어에서는<q lang="en">인용의 표현</q> 을 이렇게 합니다.</p>
     <p>프랑에서는<q lang="fr">인용의 표현</q> 을 이렇게 합니다.</p>

    :lang(en) { quotes: '"' '"'  "'"  "'"; }

    :lang(fr) { quotes: "<<" ">>" "<" ">"; }

/영어에서는 " 인용의 표현 "을 이렇게 합니다.
    프랑에서는 <<인용의 표현>> 을 이렇게 합니다.
CSS 의사 요소(pseudo-elements)



 ::first-letter

이 의사 요소(pseudo-element)는 텍스트의 첫 글자만을 선택합니다.

단, 블록(block) 타입의 요소에만 사용할 수 있습니다.
- font 속성
- color 속성 
- background 속성
- margin 속성
- padding 속성
- border 속성
- text-decoration 속성
- text-transform 속성
- line-height 속성
- float 속성
- clear 속성
- vertical-align 속성 (단, float 속성값이 none일 경우에만)

ex)  p::first-letter { color: #FF4500; font-size: 2em; }
::first-line

이 의사 요소는 텍스트의 첫 라인만을 선택합니다.

단, 블록(block) 타입의 요소에만 사용할 수 있습니다.

- font 속성
- color 속성 
- background 속성

- word-spacing 속성
- letter-spacing 속성
- text-decoration 속성
- text-transform 속성
- line-height 속성
- clear 속성
- vertical-align 속성

ex) p::first-line { color: #FF4500; font-size: 2em; } /첫줄

ex) p::first-letter { color: #FFD700; font-size: 2em; font-weight: bold; }

     p::first-line { color: #FF4500; }

   /의사 요소의 동시 적용
::before 이 의사 요소는 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다.

ex)     p::before { content: url("/examples/images/img_penguin.png"); }
/p태그 앞에 이미지 삽입
::after 이 의사 요소는 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다.

ex) p::after { content: url("/examples/images/img_penguin.png"); }
::selection

 

 이 의사 요소는 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다.

ex) p::selection { color: #FF4500; } /원하는 단락을 드래그하면 칼라가 변함
  기본 속성 선택자

 속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있습니다.


- [속성이름] 선택자
ex) <p title class="a"></p>
     <p title class="n"></p>

  [title] { background: black; color: yellow; } /타이틀 전부 변함

- [속성이름="속성값"] 선택자
ex) <h2 title class="first h2"></h2>
     <p title class="p"></p> 

[title="first h2"] { background: black; color: yellow; }
  문자열 속성 선택자

CSS에서는 기본 속성 선택자 이외에도 문자열 속성 선택자를 제공합니다.

문자열 속성 선택자는 HTML 요소가 가지고 있는 특정 속성의 속성값 내에 특정 문자열을 확인하여 선택해 줍니다.

 

CSS에서 사용할 수 있는 문자열 속성 선택자는 다음과 같습니다.

 

- [속성이름~="속성값"] 선택자
title 속성값이 정확히 "first"인 요소나 띄어쓰기(whitespace)를 기준으로 인식되는 단어에 "first"를 포함한 요소만을 선택합니다.

ex) <h2 title class="first h2"></h2>
     <p title class="first p"></p>
    <p title class="first-p"></p>

[title~="first"] { background: black; color: yellow; }

- [속성이름|="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택합니다.

ex) <h2 title class="first h2"></h2>
     <p title class="first p"></p>
    <p title class="first-p"></p>

[title|="first"] { background: black; color: yellow; }
 title 속성값이 정확히 "first"인 요소나 "first" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택합니다.

- [속성이름^="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택합니다.

ex) <h2 title class="first h2"></h2>
     <p title class="first p"></p>
    <p title class="first-p"></p>
    <p title class="p first"></p>

  [title^="first"] { background: black; color: yellow; }
 title 속성값이 "first"로 시작되는 요소가 모두 선택됩니다.

- [속성이름$="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택합니다.

ex) <h2 title class="first h2"></h2>
     <p title class="first p"></p>
    <p title class="p-first"></p>
    <p title class="p first"></p>

 [title$="first"] { background: black; color: yellow; }
 title 속성값이 "first"로 끝나는 요소가 모두 선택됩니다

- [속성이름*="속성값"] 선택자
ex) <h2 title class="first h2"></h2>
     <p title class="my-first-p"></p>
    <p title class="p-first"></p>

[title*="first"] { background: black; color: yellow; }
 title 속성값에 "first"를 포함하는 요소가 모두 선택됩니다.
  속성 선택자의 활용  속성 선택자들을 활용하면 클래스나 아이디의 지정 없이도 스타일을 적용할 HTML 요소를 손쉽게 선택할 수  있습니다.

ex)  <form>
     사용자 : <br>
     <input type="text" id="" name="username" >
     비밀번호 : <br>
     <input type="password" id="" name="password" >
  </form>

    input[type="text"] { width: 150px; display: block; background-color: #FFEFD5; margin-bottom: 10px; }

    input[type="password"] { width: 130px; display: block; background-color: #90EE90; border: solid 2px red; }

    input[type="password"]:focus { background-color: #FFC0CB; }
비밀번호를 클릭하면 칼라가 변함

 

 

출처: tcpschool.com/css/css_selector_pseudoClass

728x90

'html+css' 카테고리의 다른 글

리셋 css, 외부 프로그램  (0) 2021.05.26
navigation bar  (0) 2021.04.25
align 정렬 (margin, position, float)  (0) 2021.04.25
float 속성(clear, overflow)  (0) 2021.04.25

관련글

티스토리툴바