본문 바로가기
HTML+CSS

[ HTML+CSS ] CSS 선택자, 가상클래스 정리

duqrlcks 2022. 6. 15. 00:20
반응형

기본 선택자

1. 전체 선택자 *

/* 전체 요소 선택 */
* {
  color: green;
}

 

2. 태그 선택자

/* 모든 a 태그 */
a {
  color: red;
}

 

3. 클래스 선택자 .

/* class="spacious" 인 모든 요소 */
.spacious {
  margin: 2em;
}

/* <li> 태그중 class="spacious" 인 모든 요소 */
li.spacious {
  margin: 2em;
}

/* <li> 태그중 "spacious" 와 "elegant" 를 포함하는 요소 */
/* ex) class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

 

4. ID 선택자 #

/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}

 

5. 속성 선택자 [ ]

/* <a> 태그중 'title' 속성이 있는 요소 */
a[title] {
  color: purple;
}

/* <a> 태그중 [href="https://example.org"] 이 있는 요소*/
a[href="https://example.org"] {
  color: green;
}

/* <a> 태그중 href 속성값에 "example"을 포함하는 요소 */
a[href*="example"] {
  font-size: 2em;
}

/* <a> 태그중 href 속성값이 ".org"로 끝나는 요소 */
a[href$=".org"] {
  font-style: italic;
}

 

그룹 선택자

1. 선택자 목록 ,

/* #main, .content, article에 한번에 적용 */
#main,
.content,
article {
  font-size: 1.1em;
}

 

결합자

1. 자손 결합자 (>와 헷갈리지 말것)

/* <ul> 요소 안에 위치하는 모든 <li> */
ul li { }

 

2. 자식 결합자 >

/* <ul> 요소 바로 아래에 위치하는 모든 <li> 요소 */
ul > li { }

 

3. 일반 형제 결합자 ~

/* <p> 요소를 뒤따르는 모든 <span> 요소 */
p ~ div { }

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

4. 인접 형제 결합자 +

/* 구문 */
A + B

h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

가상 클래스

1) :active

마우스를 누르는 순간부터 떼는 시점까지를 의미한다. 보통 <a>, <button>, <label>과 함께 사용된다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

 

 

2) :checked

선택했거나 on 상태인 라디오박스, 체크박스, 옵션 요소를 나타낸다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

3) :first-child

형제 요소의 그룹 중 첫번째 요소를 나타낸다.

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

4) :first-of-type

형제 요소의 그룹 중 해당 타입의 첫번째 요소를 나타낸다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

※ :first-child와 :first-of-type 차이

<style>
    .parent > .child:first-child {  
      color: red;
    }

    .parent > .child:first-of-type {  
      color: red;
    }
</style>

<div class="parent">  
  <h1>TITLE</h1> 
  <div class="child">Child1</div>  
  <div class="child">Child2</div>  
  <div class="child">Child3</div>  
</div>
:first-child는 형제 요소의 그룹 중 첫번째 요소
위 코드에서 child 클래스의 형제 요소의 그룹 중 첫번째 요소는 <h1> 요소다. <h1>의 클래스는 child가 아니므로 스타일 적용이 되지 않는다. 

:first-of-type은 형제 요소의 그룹 중 해당 타입의 첫번째 요소
위 코드에서 child 클래스의 형제 요소의 그룹 중 child 클래스의 첫번째 요소는 Child1 이다.

결론? :first-of-type 이 좋다.
:last-child, :last-of-type 도 완전히 동일한 원리다(pass)

 

 

 

 

5) :not()

/* 구문 */
:not(selector) { style properties }

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

가장 왼쪽만 스타일 적용이 안된 것을 확인할 수 있다.

 

 

 

 

6) :nth-child

형제 그룹에서, 선택하려는 요소의 인덱스 패턴을 나타내는 요소를 가리킨다.

 

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}


/* 표의 홀수번째 행을 나타낸다. */
tr:nth-child(odd) {}
tr:nth-child(2n+1) {}


/* 표의 짝수번째 행을 나타낸다. */
tr:nth-child(even) {}
tr:nth-child(2n) {}


/* 임의의 7번째 요소를 나타낸다. */
:nth-child(7)


/* 5의 배수 요소를 모두 나타낸다. 5, 10, 15, ... */
:nth-child(5n)


/* 7번째와 그 이후의 모든 요소, 즉 7, 8, 9, ... */
:nth-child(n+7)


/* 앞에서 세 개의 요소를 나타낸다. */
:nth-child(-n+3)

 

 

 

 

7) :nth-of-type

:nth-child와 비슷하지만 형제 그룹에서, 같은 타입만을 취급한다.

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

8) :focus

사용자가 요소를 클릭 또는 Tab 키로 선택했을 때 발동한다.

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

9) :after & :before

:after는 요소의 앞부분, :before는 요소의 뒷부분을 의미한다. 폼 엘리먼트중 input, textarea, select 이외의 요소에 모두 적용 가능하다. 'content' 속성으로 내용을 채운 뒤에 자유롭게 스타일링 하면 된다. 

 

※ :before를 통한 Breadcrumb 구현

더보기 
<style>
    div {
      margin: 50px;
    }

    .breadcrumb a {
      text-decoration: none;
      color: gray;
    }

    .breadcrumb a:not(:first-child):before {
      content: '\f105';
      font-family: fontawesome;
      margin-right: 5px;
    }
</style>

<body>
  <div class="breadcrumb">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <a href="">D</a>
  </div>
</body>

 

 

 

※ :before, :after 예제

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

<참조>

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes   

 

 

반응형
저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

[ CSS ] 로딩 애니메이션 구현  (0) 2022.07.31
[ HTML+CSS ] box-shadow, text-shadow  (0) 2022.06.15
[ HTML+CSS ] Transform, Transition, Animation  (0) 2022.04.16
[ HTML+CSS ] float과 포지셔닝(static, relative, absolute, fixed)  (0) 2022.04.10
[ HTML+CSS ] grid 쉽게 쓰자  (0) 2022.04.07

'HTML+CSS' Related Articles

티스토리툴바