[CSS] CSS 선택자

zzzdawn45·2025년 7월 18일
CSS

CSS

목록 보기
1/8
post-thumbnail

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말한다

CSS로 속성을 부여하는 형식은 다음과 같다

01 전체 선택자

  • 페이지의 모든 요소를 가리키는 선택자로 * 로 표시한다
  • id나 class명이 부여되어있든 상관없이 속성을 부여할 수 있다
  • 불필요하게 전체 선택자를 사용하는 것은 속도 저하의 원인이 되므로 필요한 경우가 아니면 선택자를 명시하는 것이 더 좋다
<div>
  <span>abcd</span>
  <p>1234</p>
  <ul>
    <li>list 1</li>
    <li>list 2</li>
  </ul>
</div>

<style>
  *{
    color: red;
  }
</style>

02 Tag 선택자

  • 주어진 이름의 태그를 선택하는 선택자이다
<body>
  <header>Hi everyone</header>
</body>

<style>
  body{
    background-color: green;
  }

  header{
    background-color: black;
    color: white;
  }
</style>

03 class 선택자

  • 주어진 이름의 클래스를 선택하는 선택자이다. . 을 붙여 클래스임을 구분지어 준다
<p class="name">
  name class
</p>

<style>
  .name{
    color: green;
  }
</style>

04 id 선택자

  • 주어진 이름의 아이디를 선택하는 선택자이다. #을 붙여 아이디임을 구분지어준다
<h1 id="title">
  id title
</h1>

<style>
  #title{
    color: red;
  }
</style>

05 속성 선택자

태그에 붙은 속성도 선택자로 사용할 수 있다

<a href="http://www.google.com">google</a>
<input type="password">

다음과 같은 태그가 있다면 위와 같이 선택할 수 있다

<a href="http://www.google.com">google</a>
<input type="password">

<style>
  a[href="http://www.google.com"] {
    text-decoration: none;
    color: green;
  }

  input[type="password"]{ 
    border-radius: 4px;
  }
</style>

단순히 속성이 붙어있거나 속성 중에도 특정 값을 가지는 요소를 선택할 때 사용한다

a[href] {
    /*href 속성을 지닌 모든 a 태그*/
}
a[href^="https://"] {
    /*href 속성값이 https://로 시작하는 a 태그*/
}
img[src$=".png"] {
    /*src 속성값이 .png로 끝나는 img 태그*/
}
속성명설명
p[class~="abc"]class명이 유일하게 ‘abc’이거나 여러개의 class 명 중 하나가 ‘abc’인 p 요소
p[class="abc"]
p[class^="abc"]class명이 철차 ‘abc’로 시작하는 p 요소
p[class$="abc"]class명이 ‘abc’로 끝나는 p 요소
p[class*="abc"]class명이 ‘abc’가 포함하는 p 요소

06 가상 클래스(Pseudo class) 선택자

실제 요소에 붙은 class명이 아니지만 특정 조건에서 마치 그 class가 붙어있는 것처럼 사용하는 선택자이다. 쓸 수 있는 의사 클래스가 정해져 있고 :를 붙여 사용한다

a:link링크가 걸린 문자에 속성을 부여하는 선택자
a:visited링크를 클릭하여 해당 페이지에 다녀온 경우 속성을 부여하는 선택자
a:hover링크가 걸림 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자
a:active링크 걸린 글자가 활성화 되었을 경우의 속성을 부여하는 선택자(클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자(키보드의 [Tap]키 등으로 포커스가 나타날 경우)
<a href="google.com">google</a>
<a href="http://www.google.com">google</a>
<div>hover me</div>
<input value="focus"></input>
<button>active</button>

<style>
  a:link{
    /*방문하지 않은 a 태그*/
    color: red;
  }
  a:visited{
    /*방문한 a 태그*/
    color: blue;
  }
  div:hover{
    /*커서가 올라가 있는 div 요소*/
    color:gold;
  }
  input:focus{
    /*포커싱 되어있는 input 태그*/
    /*tab 또는 click으로 input에 focus를 주면 확인할 수 있습니다.*/
    background-color: green;
  }
  button:active{
    /*활성화한 button 태그*/
    background-color: red;
  }
</style>

의사 클래스들 중에 자주 안써서 있는지도 몰랐던 의사 클래스들도 있다. 너무 많아서 아래 링크를 달아둘테니 참고하면 된다

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

구조 선택자

DOM tree 구조상 요소가 어디에 위치했는지에 따라 적용되는 선택자이다

:root {
    /*DOM tree의 root 요소를 가리킨다. HTML이면 html 태그를 가리킨다 */
}
:empty {
    /*요소 중 자식이 없는 요소를 가리킨다 (안에 아무 요소도 없음) */
}
<html>
  위는 안채워진 p태그, 아래는 채워진 p 태그
  <p></p>
  <p>abcde</p>
</html>

<style>
  :root{
    background-color: green;
  }
  p{
    border: 2px solid black;
  }
  p:empty{
    border: 2px solid blue;
  }
</style>

요소들 중 첫번재 요소, 짝수번 요소 등등 일부 요소만 선택할 때 사용하는 선택자들도 있다

:nth-child() {
    /*()안에 들어있는 수식을 기반으로 요소를 선택한다 */
    /*예를 들어 p:nth-child(2) 라면 2번째 자식인 p를 선택 */
    /*n을 이용한 간단한 수식을 사용할 수 있습니다.*/
    /*p:nth-child(3n+2) 라면 3n+2번째 자식인 p를 선택합니다.(2,5,8...) */
    /*:nth-child(odd),:nth-child(even) 같은 특수 수식도 이용 가능한데, odd는 홀수, even은 짝수 요소를 선택한다.*/
}

:nth-last-child() {
    /*nth-child랑 같은데 뒤에서부터 샌다*/
}

:first-child {
    /*첫번째 자식인 요소를 선택한다. :nth-child(1)과 같다*/
}

:last-child {
    /*마지막째 자식인 요소를 선택한다. :nth-last-child(1)과 같다*/
}

:only-child {
    /*sibling이 없는 요소를 선택한다.*/
}

:nth-of-type() {
    /*:nth-child처럼 ()안에 선택자를 집어넣어서 쓴다.*/
    /*nth-child와 달리 특정 태그에 대해서 count를 진행한다*/
}

:nth-last-of-type() { /*nth-last-child의 nth-of-type버전*/}

:first-of-type() { /*first-child의 nth-of-type버전*/}

:last-of-type { /*last-child의 nth-of-type버전*/}

:only-of-type { /*only-child의 nth-of-type버전*/}

구조 선택자 : nth-child와 nth-of-type의 차이점

예시로 이해해보자

<div class="parent">
  <p>p1</p>
  <span>span1</span>
  <p>p2</p>
  <p>p3</p>
  <span>span2</span>
</div>

<style>
  p:nth-child(3){
    color: red;
  }
  p:nth-of-type(3){
    color: blue;
  }
</style>

위와 같이 html과 css가 있다면 nth-child는 p2를 선택하고 nth-of-type은 p3를 선택한다

  • nth-child 는 sibling중 type이 다른 요소들도 counting에 포함된다. 3번째 자식인 p는 p2이다
  • 반면에 nth-of-type은 sibling중 다른 요소는 counting에서 배제한다 → 즉 <span>이 count되지 않기 때문에 p:nth-of-type(3)은 p3, p:nth-of-type(2)은 p2 이다

부정 선택자

:not 으로 사용하는 부정 선택자는 ~가 아닌 아닌 요소를 선택한다. 괄호안에는 CSS 선택자가 들어갈 수 있다

h1:not(.title){
    /*h1태그 중 .title 클래스가 붙지 않은 태그를 선택합니다.*/
}
<h1 class="title">a</h1>
<h1>b</h1>

<style>
  h1:not(.title){
    color: red;
  }
</style>

07 가상 요소(Pseudo element)

가상 요소는 실제 존재하지 않은 요소를 만들어준다. 아주 유용한 문법인데, 활용도가 무궁무진하다. :: 를 붙여서 사용한다

::after

:after 로 사용하는 것도 가능하다. 둘 다 맞는 문법이다

<p>오른쪽에 가상요소</p>

<style>
  p::after{
    content: "abcde";
    color: green;
  }
</style>

가상 요소를 사용하면 DOM tree에 ::after가 추가된것을 볼 수 있다. p 요소 바로 오른쪽에 가상의 요소가 생긴다

::before

:before 로 사용하는 것도 가능하다

p::before {
    content: "fghij";
    color:blue;
}
<p>왼쪽에 가상요소</p>

<style>
  p::before {
    content: "fghij";
    color:blue;
  }
</style>

::after와 같은 가상 요소 이지만 부모 요소의 왼쪽에 생긴다. 보통 content:"";로 비어있는 div처럼 사용한다

::before ::after 는 반드시 content 가 있어야 출력된다. 빈 문자열이라도 작성을 해줘야 작동한다

08 CSS 결합자

선택자 간의 관계로 선택자를 정의할 수 있다

자식 결합자

선택자 요소의 자식 요소(DOM tree 바로 아래 요소)를 선택하는 선택자이다

<ul class="list">
  <li class="a">a</li>
  <li class="b">b</li>
  <li class="c">c</li>
  <ul>
    <li class="d">d</li>
  </ul>
</ul>

<style>
  ul.list > li{
    /* ul 태그 자식 요소인 모든 li를 선택 */
    color: green;
  }
</style>

하위 결합자

선택자 요소의 하위 요소(DOM tree 아래 모든 요소)를 선택하는 선택자이다

<ul class="list">
  <li class="a">a</li>
  <li class="b">b</li>
  <li class="c">c</li>
  <ul>
    <li class="d">d</li>
  </ul>
</ul>

<style>
  ul.list li{
    /* ul 태그 하위 요소인 모든 li를 선택 */
    color: green;
  }
</style>

위 코드는 <ul class="list"> 태그 안의 모든 li의 color를 초록색으로 바꾼다

자식 결합자는 바로 아래 태그(자식)만 선택하지만 하위 결합자는 해당 요소를 조상으로 가지는 모든 요소를 선택한다

인접 형제 결합자

해당 요소의 형제 요소(sibling)중 바로 옆(아래) 요소를 선택하는 선택자이다

<ul class="list">
  <li class="a">a</li>
  <li class="b">b</li>
  <li class="c">c</li>
</ul>

<style>
  li.a + li{
    /*a 클래스를 가지는 li 바로 옆(아래) 요소*/
    color: red;
  }
</style>

위 코드는 <li class="b">b</li>를 선택한다

일반 형제 결합자

해당 요소의 모든 형제 요소를 선택하는 선택자이다

<ul class="list">
  <li class="a">a</li>
  <li class="b">b</li>
  <p>???</p>
  <li class="c">c</li>
  <li class="d">d</li>
  <li class="e">e</li>
</ul>

<style>
  li.b ~ li{
    /*b 클래스를 가지는 li 아래 모든 sibling 요소*/
    color: red;
  }
</style>

09 선택자의 우선순위

  • 같은 선택자가 여러 CSS 명령을 중복 받으면 우선순위가 같은 선택자는 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높다
  • 최우선으로 CSS를 적용해야 할 경우에는 선택자 속성을 부여하는 마지막에 !important 를 붙이면 된다
  • 전체 우선순위는 다음과 같다
!important > 인라인 스타일 > ID 선택자 > 클래스, 속성, 가상 클래스 > 태그, 가상 요소 > 브라우저 기본
  • 부여한 속성이 적용되지 않는 다면 이전에 작성한 CSS중 더 높은 순위를 갖는 선택자가 있는지 의심해봐야 한다

출처 : https://coding23213.tistory.com/15

출처 : https://velog.io/@dev2820/CSS-CSS-선택자-정리

profile
zzzdawn45
다음 포스트

[CSS] position으로 HTML 요소 배치하기

0개의 댓글