본문 바로가기
Web/CSS

#2. CSS의 다양한 셀렉터

도톤팽이 2023. 3. 3. 16:51
728x90

1. 전체 셀렉터 (*)

*은 HTML문서 내의 모든 요소를 선택한다.

      * {
        color: blue;
      }

2. 태그 셀렉터

지정된 태그명을 가지는 요소를 선택한다.

      h1 {
        color: blue;
      }

      p {
        color: red;
      }

3. ID 셀렉터

해당 id어트리뷰트값을 가지는 요소를 선택한다.

"#어트리뷰트값" 형식으로 작성한다.

 

CSS

      #header {
        color: blue;
      }

      #text {
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
	<link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <h1 id="header">Hello Css!</h1>
    <p id="text">This is paragraph</p>
    <h1 id="text">Hello Css! 2</h1>
  </body>
</html>

4. Class 셀렉터

해당 class를 가지는 어트리뷰트값을 가지는 요소를 선택한다.

".어트리뷰트값" 형식으로 작성한다.

CSS

.header {
        color: red;
      }

.text {
        color: blue;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <h1 class="header">Hello Css!</h1>
    <p class="text">This is paragraph</p>
    <h1 class="text">Hello Css! 2</h1>
  </body>
</html>

5. 어트리뷰트 셀렉터

지정된 어트리뷰트를 갖는 모든 요소를 선택합니다.

"셀렉터[어트리뷰트]"형식으로 작성되게 됩니다.

CSS

      a[href] {
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href="https://develop-historychosun.tistory.com/">My Web Here.</a> <br />
    <a href="http://www.naver.com" target="_top">Go to naver.</a>
  </body>
</html>

"셀렉터[어트리뷰트=값]" 형식으로 지정하면 지정된 어트리뷰트를 가지며 지정된 값과 일치하는 요소를 선택합니다.

CSS

      a[target="_top"] {
        color: red;
      }

이 외에도

셀렉터[어트리뷰트~=값] 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함하는 요소를 선택합니다.
셀렉터[어트리뷰트|=값]  지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 하이픈(값-)으로 시작하는 요소를 선택합니다.
셀렉터[어트리뷰트^=값] 지정된 어트리뷰트 값으로 시작하는 요소를 선택합니다.
셀렉터[어트리뷰트$=값] 지정된 어트리뷰트 값으로 끝나는 요소를 선택합니다.
셀렉터[어트리뷰트*=값] 지정된 어트리뷰트 값을 포함하는 요소를 선택합니다.

6.1 후손 셀렉터

자신의 1단계 상위에 속하는 요소를 부모요소, 1단계 하위에 속하는 요소를 자손요소라고 합니다.

자신보다 n단계 하위에 속하는 요소를 후손요소라 합니다.

 

후손 셀렉터는 셀렉터A의 모든 후손(하위) 요소 중 셀렉터B와 일치하는 요소를 선택합니다.

ex) 셀렉터A 셀렉터B

CSS

      div p {
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <p>This is text1.</p>
    <div>
      <p>This is text2 in div.</p>
      <p>This is text3 in div.</p>
      <span><p>This is text3 in div span.</p></span>
    </div>
  </body>
</html>

6.2 자식 셀렉터

자식 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택합니다.

ex)셀렉터A > 셀렉터B

CSS

      div > p {
        color: red;
      }

 

6.3 형제 셀렉터

형제 셀렉터는 동위 관계에서 뒤에 위치하는 요소를 선택할 떄 사용합니다.

ex)셀렉터A + 셀렉터B

CSS

      p + span {
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <p>This is text1.</p>
    <div>
      <p>This is text2 in div.</p>
      <span><p>This is text3 in div span.</p></span>
      <span><p>This is text4 in div span.</p></span>
    </div>
  </body>
</html>

셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택합니다.

ex)셀렉터A ~ 셀렉터B

CSS

      p ~ span {
        color: red;
      }

7. 가상 클래스 셀렉터

가상클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용한다.

  • 마우스가 올라와 있을때
  • 링크를 방문했을 때와 아직 방문 안했을 때
  • 포커스가 들어와 있을때

가상클래스는 마침표(.)대신 콜론(:)을 사용한다.

CSS

      a:hover {
        color: red;
      }
      input:focus {
        background-color: aqua;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href="#">Refresh Page.</a>
    <input type="text" placeholder="Click here" />
  </body>
</html>

7.1 링크 셀렉터, 동적 셀렉터

:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터에 포커스가 들어와 있을 때

CSS

      a:link {
        color: orange;
      }
      a:visited {
        color: green;
      }
      a:hover {
        color: red;
      }
      a:active {
        color: blue;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href="#">Refresh Page.</a>
  </body>
</html>

7.2 UI 요소 상태 셀렉터

:checked 셀렉터가 체크 상태일 때
:enabled 셀렉터가 사용 가능한 상태일 때
:disabled 셀렉터가 사용 불가능한 상태일 때

CSS

      input:enabled + span {
        color: blue;
      }
      input:disabled + span {
        color: green;
      }
      input:checked + span {
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <input type="radio" checked value="male" name="gender" /><span>Male</span><br />
    <input type="radio" value="female" name="gender" /><span>Female</span><br />
    <input type="radio" value="no" name="gender" disabled /><span>No Check Here.</span><br />
  </body>
</html>

7.3 구조 가상 클래스 셀렉터

:first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
:last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.

CSS

      p:first-child {
        color: red;
      }
      p:last-child {
        color: blue;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <p>This is Text1.</p>
    <p>This is Text2.</p>
    <p>This is Text3.</p>
  </body>
</html>
:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.

n은 0부터 시작하는 정수이다.

CSS

      p:nth-child(2n) {
        color: red;
      }
      p:nth-child(2n + 1) {
        color: blue;
      }
:first-of-type  셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.
:last-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n) 셀렉터에 해당하는 요소의 부모의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.
:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.

CSS

      p:first-of-type {
        color: red;
      }
      p:last-of-type {
        color: blue;
      }
      p:nth-of-type(5) {
        color: orange;
      }
      p:nth-last-of-type(5) {
        color: aqua;
      }

7.4 부정 셀렉터

셀렉터에 해당하지 않는 모든 요소를 선택한다.

CSS

      input:not([type="password"]) {
        background-color: yellow;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="Here is Text." />
    <input type="password" placeholder="Here is Password." />
    <input type="email" placeholder="Here is E-mail." />
  </body>
</html>

7.5 정합성 체크 셀렉터

:valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터) 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

CSS

      input[type="text"]:valid {
        background-color: greenyellow;
      }
      input[type="text"]:invalid {
        background-color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <label
      >입력값 필요
      <input type="text" required />
    </label>
    <br />
    <label
      >특수문자를 포함하지 않는 4자리 문자 또는 숫자
      <input type="text" value="ab1!" pattern="[a-zA-Z0-9]{4} required" />
    </label>
    <br />
    <label
      >핸드폰 번호 형식
      <input
        type="text"
        value="010-1234-5678"
        pattern="^\d{3}-\d{3,4}-\d{4}$"
        required
      />
    </label>
  </body>
</html>

8. 가상 요소 셀렉터

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.

  • 요소 콘텐츠의 첫 글자 또는 첫 줄
  • 요소 콘텐츠의 앞 또는 뒤

가상 요소에는 두개의 콜론(::)을 사용한다.

::first-letter 콘텐츠의 첫 글자를 선택한다.
::first-line 콘텐츠의 첫 줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection 드래그한 콘텐츠를 선택한다. 일부 브라우저에서 동작하지 않는다.

CSS

      p::first-letter {
        font-size: 50px;
      }
      p::first-line {
        background-color: yellowgreen;
      }
      h1::before {
        content: " First ";
        color: blue;
      }
      h1::after {
        content: " Last ";
        color: red;
      }

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>This is h1.</h1>
    <p>
      This is text1. This is text1. This is text1. This is text1. This is text1.
      This is text1. This is text1. This is text1. This is text1. This is text1.
      This is text1. This is text1. This is text1. This is text1. This is text1.
    </p>
  </body>
</html>

 

728x90
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

#6. BackGround  (0) 2023.03.10
#5. display, visibility, opacity 프로퍼티  (0) 2023.03.10
#4. CSS BOX  (0) 2023.03.10
#3. CSS 프로퍼티 값의 단위  (0) 2023.03.04
#1. CSS 기본문법  (0) 2023.02.27

'Web/CSS' Related Articles

티스토리툴바