구조 가상 클래스

  • 웹 문서를 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자

:root

  • 문서 전체에 적용
  • 문서 안에 루트(root) 요소에 스타일을 적용함
  • HTML문서에서는 최상위요소가 <html>이므로, 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우, :root 선택자를 이용하여 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
   :root {
  	    color: orange;
   	 }
   ul {
   		list-style: none;
      }
  </style>

  </head>
<body>
  <h1>Number</h1>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>
</body>
</html>

:nth-child(n) / :nth-last-child(n)

  • 자식 요소의 위치에 따라 스타일 적용
  • 웹 문서에서 특정 부분에 스타일을 적용할 경우, 보통 class나 id 선택자를 이용하여 class나 id에 대한 스타일을 정의하는데 여러 개의 항목이 일렬(가로/세로)로 나열되어 있는 경우, 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 수 있음
    (주로 메뉴 항목에 사용)

:nth-child(n)

  • 앞에서부터 n번째 자식 요소에 스타일에 적용

:nth-last-child(n)

  • 끝에서부터 n번째인 자식 요소에 스타일을 적용

n의 값의 0부터 차례대로 정수를 대입하여 계산

  • 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야 함. (문서 구조로 표시했을 때 모두 같은 레벨의 요소)

nth-child(2n+1) 또는 :nth-child(odd) -> 홀수번째

nth-child(2n) 또는 :nth-child(even) -> 짝수번째

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    ul {
        list-style: none;
      }
    ul > :nth-child(odd) {
      color: red;
    }
    ul > :nth-child(even) {
      color: blue;
    }
  </style>

  </head>
<body>
  <h1>Number</h1>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>
</body>
</html>

:nth-of-type(n), :nth-last-of-type(n)

  • 특정 태그 위치에 스타일 적용
  • <p>태그나 <li>태그가 여러 개 나열되어 있고 각 태그에 id나 class를 사용하지 않은 상태에서 몇 번째 있는 <p>태그 또는 몇 번째에 있는 <li>태그처럼 태그에 따라 몇 번째에 있는 항목인지를 지정해 스타일을 적용
  • :nth-of-type(n) 은 앞에서부터 n번째 요소
  • :nth-last-of-type(n) 은 끝에서부터 n번째 요소에 적용함

:first-child / :last-child

  • 첫 번째, 마지막 요소에 스타일 적용
  • :first-child 는 첫 번째 자식 요소를 선택해 스타일을 적용
  • :last-child 는 마지막 자식 요소에 스타일 적용
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    ul {
      list-style: none;
      width: 500px;
      display: flex;
    }
    li {
      border: 1px solid #000;
      width: 25%;
      padding: 10px;
      display: flex;
      align-item: center;
      justify-content: center;
    }
    ul li:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    ul li:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  </style>

  </head>
<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</body>
</html>

:first-of-type / :last-of-type

  • 형제 관계 요소의 위치에 따라 스타일 적용
  • :first-of-type 은 첫번째 요소
  • :last-of-type 은 마지막 요소
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    ul {
      list-style: none;
      width: 500px;
      display: flex;
    }
    li {
      border: 1px solid #000;
      width: 25%;
      padding: 10px;
      display: flex;
      align-item: center;
      justify-content: center;
    }
    ul li:first-of-type {
      color: red;
    }
    ul li:last-of-type {
      color: blue;
    }
  </style>

  </head>
<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</body>
</html>

:only-child / :only-of-type

  • 하나뿐인 자식 요소에 스타일 적용
  • :only-child 는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용
  • :only-of-type 은 :only-child 와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
    .container {
      width: 300px;
      line-height: 2rem;
      border: 1px solid salmon;
      border-radius: 10px;
      padding: 10px;
    }
    
    .container p:only-child {
      color: rosybrown;
    }
  </style>

  </head>
<body>
  <div class="container">
    <p>
      이상하게도 요즘엔 그냥 쉬운 게 좋아
하긴 그래도 여전히 코린 음악은 좋더라
Hot pink보다 진한 보라색을 더 좋아해, 음
또 뭐더라? 단추 있는 pajamas, lipstick, 좀 짓궂은 장난들
I like it, I'm 25 (oh)
날 좋아하는 거 알아
Oh-oh-oh, I got this, I'm truly fine (oh)
이제 조금 알 것 같아 날
긴 머리보다 반듯이 자른 단발이 좋아
하긴 그래도 좋은 날 부를 땐 참 예뻤더라
오, 왜 그럴까? 조금 촌스러운 걸 좋아해, 음
그림보다 빼곡히 채운 palette, 일기, 잠들었던 시간들
    </p>
  </div>
</body>
</html>

:target

  • 앵커 목적지에 스타일 적용하기
  • 웹 문서에서 같은 사이트의 페이지나 다른 사이트의 페이지로 이동할 때 링크(link)를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 사용함
  • :target 선택자를 이용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있음

:not

  • 특정 요소가 아닐 때 스타일 적용
  • :not() 선택자는 이름과 같이 부정의 의미. "괄호 안에 있는 요소를 제외한" 이라는 의미

가상요소

  • 내용의 일부만 선택해 스타일을 적용할 때 사용함
    가상클래스와 구별을 위하여 클래스의 이름 앞에 콜론 두개(::)를 붙여 표시함

::first-child / ::first-letter

  • 첫 번째 줄, 첫 번째 글자에 스타일 적용
  • 지정한 요소의 첫 번째 줄(::first-line)이나 첫 번째 글자(::first-letter)에 스타일을 적용할 수 있음
  • ::first-letter 은 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 함
  • 만약 <p>태그 안에 <br>태그가 있어 첫 번째 글자가 첫 번째 줄에 없을 경우엔 적용할 수 없음

::before / ::after

  • 내용의 앞뒤에 콘텐츠 추가
  • 요소의 앞, 뒤에 텍스트나 이미지 등을 추가할 수 있음
profile
성장하는 개발자 유슬이 입니다!

0개의 댓글