가치투자자

[CSS] 선택자 : 가상 클래스 & 가상 요소 본문

Programming/HTML, CSS

[CSS] 선택자 : 가상 클래스 & 가상 요소

미주민 2023. 4. 21. 17:56
728x90
반응형

 선택자 (Selector) 

이 글은 선택자와 연장선에 있는 글이다. 선택자에 대해 아직 잘 모르겠다면, 아래의 글을 먼저 읽고 오자.

https://valueengine.tistory.com/40

 

[CSS] 선택자

선택자 (Selector) 우리가 원하는 UI를 만들기 위해 HTML에 스타일(디자인, 레이아웃 등)을 적용해줘야 한다. 이때 HTML 문서에서 우리가 원하는 요소에만 CSS를 적용하기 위해 선택자(selector) 가 필요하

valueengine.tistory.com

 

 3. 가상 클래스 선택자 (Pseudo-Class Selector) 

우리가 어떤 요소에 스타일을 적용하기 위해 클래스를 만들 수 있다. 그러나 우리가 따로 만들지 않아도 존재하는 클래스가 바로 가상 클래스다.  가상 클래스 는 어떤 특정 상태가 되었을 때 사용하는 클래스로, 아래와 같은 특정한 상태가 되었을 때 사용된다.

 

  • 마우스가 올라와 있을 때
  • 링크를 클릭(방문)했을 때 or 클릭(방문)하지 않았을 때

이런 경우  선택자:가상 클래스명  형식으로 특정 요소가 특정 상태(가상 클래스)가 되었을 때 어떤 스타일을 부여할 수 있다.

 

 3-1. 동적 가상 클래스 (User action pseudo-classes) 

어떤 동적인 상태가 발생했을 때 작동하는 가상 클래스에는 대표적으로 다음과 같은 것들이 있다.

 

  •  :link  - 방문하지 않은 링크일 때
  •  :visited  - 방문한 링크일 때
  •  :hover  - 마우스가 올라와 있을 때
  •  :active  - 마우스를 클릭한 상태일 때
  •  :focus  - (클릭해서) 초점을 받은 상태일 때 (input 태그 등)

아래의 예시1을 통해 좀 더 자세히 살펴보자.

예시1>

<body>
  <h4>가치엔진 개발자 블로그</h4>
  <a href="https://valueengine.tistory.com" target="_blank">valueengine.tistory.com</a><br><br>
  아이디: <input type="text" name="id"><br>
  비밀번호: <input type="password" name="pw"><br><br>
  <textarea name="review" cols="40" rows="10">방문 평가를 남겨주세요.</textarea><br><br>
  <input type="submit">
</body>
/* 링크를 클릭하지 않았을 때 */
a:link { color: red; }
/* 링크를 클릭했을 때 */
a:visited { color: green; }

/* 링크에 마우스를 올렸을 때 */
a:hover { font-weight: bold; }
/* 링크를 클릭한 상태로 있을 때 */
a:active { color: blue; }

/* 아이디, 비밀번호, 제출 등 input 태그를 클릭하고 커서 초점이 이 태그에 있을 때  */
input:focus { background-color: #ffebcd; }
/* 방문평 textarea 태그를 클릭하고 커서 초점이 이 태그에 있을 때 */
textarea:focus { background-color: #fff8dc; }

가치엔진 개발자 블로그

valueengine.tistory.com

아이디:
비밀번호:



 

728x90

 

 3-2. 구조 가상 클래스 (Structural pseudo-classes) 

앞서 2-1에서 자식 선택자에 대해 살펴봤다.  선택자A > 선택자B  형식으로 자식 요소인 모든 선택자 B에 스타일을 적용했다.

하지만 특정 자식 요소에만 스타일을 적용하고 싶을 때가 있다.

이때  선택자:가상클래스  형식의 구조 가상 클래스로 특정 요소만 선택할 수 있다. 여기서 n은 0부터 가능하다.

 

  •  :first-child  - 첫 번째 요소를 선택
  •  :last-child  - 마지막 요소를 선택
  •  :nth-child(n)  - 앞에서 n번째 요소를 선택
  •  :nth-last-child(n)  - 뒤에서 n번째 요소를 선택

예시2-1>

예시2를 살펴보면, 클래스명이 section01에서 첫 번째 li의 배경색을 skyblue로 적용하였다.

<h2 class="grouptitle">● first-child | last-child</h2>
<section class="section01">
  <h3 class="title"><span class="amp">:first-child</span>첫번째 요소 선택</h3>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</section>
/* li 중 첫번째 요소 선택 */
.section01 li:first-child { background:skyblue; }

 

예시2-2>

만약 6번째 요소에만 적용하고 싶다면, nth-child(6)을 통해 6번째 li에 스타일을 적용할 수 있다.

홀수나 짝수에만 적용하고 싶다면, 괄호 안에 odd나 even을 넣어주면 된다.

<h2 class="grouptitle">● nth-child</h2>
<section class="section03">
  <h3 class="title"><span class="amp">:nth-child(6)</span>6번째 요소 선택</h3>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</section>
/* li 중 6번째 요소 선택 */
.section03 li:nth-child(6) { background:skyblue; }

/* li 중 홀수 선택 */
.section04 li:nth-child(odd) { background:skyblue; }

/* li 중 짝수 선택 */
.section05 li:nth-child(even) { background:skyblue; }

/* li 중 세번째 요소마다 선택 */
.section06 li:nth-child(3n){ background:skyblue; }

/* li 중 두번째 요소부터 세번째 요소마다 선택 */
.section07 li:nth-child(3n+2){ background:skyblue; }

 

예시2-3>

만약 특정 범위 내의 요소를 선택하고 싶다면 아래처럼 css 코드를 짜면 된다.

/* 6번부터 li부터 모든 li 요소 선택 */
.section08 li:nth-child(n+6){ background:skyblue; }

/* 1번 li부터 3번 li까지 요소 선택 */
.section09 li:nth-child(-n+3){ background:skyblue; }

/* 3번 li부터 6번 li까지 요소 선택  */
.section10 li:nth-child(n+3):nth-child(-n+6){ background:skyblue; }

 

 3-2-1. nth-of-type() 

여기서 한 가지 더 알아가야 할 것으로 nth-of-type()이 있다.

  •  :first-of-type  - 각 타입의 첫 번째 요소를 선택
  •  :last-of-type  - 각 타입의 마지막 요소를 선택
  •  :nth-of-type(n)  - 각 타입의 앞에서 n번째 요소를 선택
  •  :nth-last-of-type(n)  - 각 타입의 뒤에서 n번째 요소를 선택

예를 들어, nth-child(2)로 하면 item 클래스를 가진 요소 중 2번째 요소만 선택된다.

<body>
  <div class="container01">
    <section class="item">1. 커피</section>
    <section class="item">2. 아이스크림</section>
    <div class="item">1) 보석바</div>
    <div class="item">2) 수박바</div>
  </div>
</body>
.item:nth-child(2) { color: #1E90FF; }
1. 커피
2. 아이스크림
1) 보석바
2) 수박바

 

그러나 nth-of-type(2)로 하면 item 클래스를 가진 요소 중 모든 타입의 2번째 요소를 선택된다. 따라서 2번째 section과 2번째 div 태그가 모두 선택된다.

.item:nth-of-type(2) { color: #1E90FF; }
1. 커피
2. 아이스크림
1) 보석바
2) 수박바

 

 

 3-3. UI 요소 상태 가상 클래스 (Structural pseudo-classes) 

input 태그 중 체크할 수 있는 UI에서 가상 클래스를 통해 스타일을 부여할 수 있다.

 

  •  :checked  - 체크가 된 상태일 때
  •  :enabled  - 사용 가능한 상태일 때
  •  :disabled  - 사용 불가능한 상태일 때

아래의 예시3을 통해 좀 더 자세히 살펴보자.

예시3>

<body>
  <input type="radio" checked="checked"> <span>메로나</span><br>
  <input type="radio"> <span>엑셀런트</span><br>
  <input type="radio" disabled> <span>배뱀배</span><br><br>

  <input type="checkbox" checked="checked"> <span>누가바</span><br>
  <input type="checkbox"> <span>투게더</span><br>
  <input type="checkbox" disabled> <span>셀렉션</span>
</body>
/* input태그가 사용 가능 할때, input 태그의 인접 형제 span에 스타일 적용 */
input:enabled + span {
  color: blue;
}
/* input태그가 사용이 불가능 할때, input 태그의 인접 형제 span에 스타일 적용 */
input:disabled + span {
  color: gray;
  text-decoration: line-through;
}
/* input태그가 체크 되었을 때, input 태그의 인접 형제 span에 스타일 적용 */
input:checked + span {
  color: red;
}
메로나
엑셀런트
배뱀배

누가바
투게더
셀렉션

 

 

 3-4. 부정 가상 클래스 (Negation pseudo-class) 

부정 가상 클래스는 특정 선택자를 제외하고 나머지 모든 요소를 선택하고자 할 때 사용하며, 형식은  :not(선택자) 이다

예시4>

input 요소 중 type 속성값이 password가 아닌 것만 선택하였다.

<body>
  <input type="text" value="Text input">
  <input type="email" value="email input">
  <input type="password" value="Password input">
</body>
input:not([type=password]) {
  background: #FFFAF0;
}

 

반응형

 

 4. 가상 요소 선택자 (Pseudo-Element Selector) 

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위한 선택자이다.

 

  •  ::first-letter  - 콘텐츠의 첫 글자를 선택한다.
  •  ::first-line  - 콘텐츠의 첫 줄을 선택한다. 블록 요소에만 적용할 수 있다.
  •  ::after  - 콘텐츠 뒤의 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
  •  ::before  - 콘텐츠 앞의 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
  •  ::selection  - 드래그한 콘텐츠를 선택한다. IOS Safari 등 일부 브라우저에서는 동작하지 않는다.
  •  ::placeholder  - input이나 textarea 태그 내에 적힌 글씨(placeholder)를 선택한다.

예시4>

<body>
  <h1> 드래그 해보세요 </h1>
  <p>Welcome to my blog! I'm studying a variety of stacks on Front-end. There are a lot of stacks. HTML, CSS, JavaScript, TypeScript, React, Redux and so on.</p><br>
  <textarea name="review" cols="30" rows="5" placeholder="어떤 경로로 방문하게 되셨나요?"></textarea>
</body>
p::first-letter { font-size: 3em; }
p::first-line   { color: red; }

h1::before {
  content: " HTML!!! ";
  color: blue;
}
h1::after {
  content: " CSS3!!!";
  color: red;
}

::selection {
  color: red;
  background: yellow;
}
::placeholder {
  color: darkblue;
  text-align: center;
}

드래그 해보세요

Welcome to my blog! I'm studying a variety of stacks on Front-end. There are a lot of stacks. HTML, CSS, JavaScript, TypeScript, React, Redux and so on.


 

 

References

 

 

728x90
반응형

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML] 시멘틱 태그(semantic tag)란?  (2) 2023.06.17
[CSS] position  (0) 2023.06.04
[CSS] display  (0) 2023.06.03
[CSS] 선택자  (1) 2023.04.19
[CSS] Flexbox 레이아웃  (0) 2023.04.17
'Programming/HTML, CSS' Related Articles more