[CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소

HTML, CSS

[CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소

gamzaggang7 2025. 4. 15. 14:49

728x90

연결 선택자

하위 선택자 (공백): 부모 요소에 포함된 모든 하위 요소 선택
자식 선택자 (>): 하위 선택자와 달리 자식 요소만 선택
인접 형제 선택자 (+): 형제 요소 중 첫 번째 동생 요소만 선택
형제 선택자 (~): 모든 형제 요소 선택

속성 선택자

해당 속성이 있는 요소 선택

[속성]: 해당 속성이 있는 요소
[속성 = 값]: 지정한 속성값이 있는 요소
[속성 ~= 값]: 지정한 속성값이 포함된 요소(단어별)
[속성 |= 값]: 지정한 속성값이 포함된 요소{하이픈 포함, 단어별)
[속성 ^= 값]: 지정한 속성값으로 시작하는 요소
[속성 ^= 값]: 지정한 속성값으로 끝나는 요소
[속성 ^= 값]: 지정한 속성값을 포함하는 요소

a[href] { ... } // href 속성이 있는 a 요소
a[target = _blank] { ... } // target 속성값이 '_blank'인 a 요소
[class ~= button] { ... } // class 값 중 button이 있는 요소
a[title |= us] { ... } // title 속성값에 us가 있거나 us-로 연결된 값이 있는 a 요소

a[title ^= eng] { ... } // title 속성값이 eng로 시작하는 a 요소
[href $= xls] { ... } // 링크한 파일 이름이 xls로 끝나는 요소
[href *= w3] { ... } // href 속성값 중 'ws'가 포함된 요소

  <style>
    img[alt] {
      border: 5px solid blue;
    }

    [width *="2"] {
      border: 5px solid red;
    }

    div p {
      color: green;
    }

    #three+p {
      color: aquamarine;
    }

    #three~p {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <img src="./img/profile.jfif" width="250px" alt="모브">
  <img src="./img/profile.jfif" width="250px">
  <img src="./img/profile.jfif" width="250px" id="three">
  <p>css 선택자 공부중</p>
  <p>css 선택자 공부중</p>
  <div>
    <p>css 선택자 공부중</p>
    <p>css 선택자 공부중</p>
  </div>
</body>

728x90

가상 클래스

여러 요소 중 원하는 요소를 선택

:hover: 특정 요소에 마우스 포인터를 올려놓으면 스타일 적용
:active: 웹 요소를 활성화했을 때 스타일 적용
:focus: 웹 요소에 초점이 맞추어졌을 때 스타일 적용
:disabled: 비활성 상태일 때 스타일 적용
:nth-child(n): 부모 안의 모든 요소 중 n번째 자식 요소 선택

  <style>
    .menu {
      padding: 10px;
      border-bottom: 1px solid #000;
    }

    .menu>li {
      display: inline-block;
      text-align: center;
    }

    li>a {
      display: inline-block;
      width: 80px;
      padding: 10px;
      text-decoration: none;
    }

    a:hover {
      color: #fff;
      background-color: gray;
    }

    a:active {
      color: #fff;
      background-color: #000;
    }
  </style>
</head>

<body>
  <ul class="menu">
    <li><a href="#">사전</a></li>
    <li><a href="#">뉴스</a></li>
    <li><a href="#">증권</a></li>
    <li><a href="#">지도</a></li>
  </ul>
</body>

    li:nth-child(3) {
      font-size: 20px;
    }

    li:nth-child(2n) {
      font-size: 20px;
    }

가상 요소

문서 안 특정 부분에 스타일 지정

::first-line / ::first-letter: 첫 번째 줄/글자에 스타일 적용
::after / ::before: 요소 앞뒤에 콘텐츠 추가
::marker: 목록 기호의 스타일 적용
::placeholder: 입력 요소의 플레이스홀더 스타일 적용

    a::first-letter {
      color: red;
    }
    a::after {
      content: '보기';
      color: orange;
    }

728x90