CSS 선택자(Selectors) - 속성 선택자와 복합 선택자

디아·2022년 5월 22일

부스트코스 - 비전공자를 위한 HTML/CSS

목록 보기

6/7

1. 속성 선택자 Attribute Selectors

기본 문법은 요소[속성명]이다. 이 경우 속성의 값은 상관없이 해당 속성을 가지고 있는 요소가 선택된다. 예를 들어 p[class] 라고 쓰면 class 값과 상관없이 class 속성을 가진 p 요소가 모두 선택된다.

/* (속성값 상관없이)class 속성이 있는 p 요소 */
p[class] {
	color: tomato;
 }
/* (속성값 상관없이)class 속성과 id 속성이 있는 p 요소*/
p[class][id]{
	font-weight: bold;
}
/* href 속성 값이 "http://velog.io"인 a 요소 */
a[href="http://velog.io"] {
  font-style: italic;
  font-size: 1.5rem;
}

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
<a href="http://velog.io">velog</a>

속성 선택자 예시 결과 화면

부분 속성값으로 선택

▪️ [attr~=value]

[class~="user"]
class 속성의 값이 정확히 "user" 이거나 속성값을 공백으로 구분했을때 "user"를 포함하는 요소 선택

<p class="user">danho</p>
<p class="user lastname">bak</p>

▪️ [attr^=value]

[class^="user"]
class 속성의 값이 "user"로 시작하는 요소 선택

<p class="username">danho</p>

▪️ [attr$=value]

[class$="user"]
class 속성의 값이 "user"로 끝나는 요소 선택

<p class="first-user">danho</p>

▪️ [attr*=value]

[class*="user"]
class 속성의 값이 "user" 문자가 포함되는 요소 선택

<p class="text-user-input">danho</p>

2. 복합 선택자 Combinator

인접 형제 선택자 Adjacent sibling combinator

인접한 형제 요소를 선택할 때 사용한다. 요소 간 + 기호를 사용하여 선택한다. 유의할 점은 여러 요소가 나열 되어 있어도 실제 스타일이 적용되는 요소는 가장 마지막 요소라는 점이다. 예를 들어, div + div + p 이런 식으로 여러 요소가 나열되어 있어도 실제 선택되는 요소는 제일 마지막에 있는 요소, 즉 p이다.

실제로 프로젝트할때 생각보다 인접 형제 선택자를 꽤 사용했는데 주로 여러 요소를 한 세트로 묶고 그 세트가 반복되는 경우 각 세트마다 margin-bottom을 주고 싶을때 사용했다.

p + button {
   margin-bottom: 2rem;
}

<div>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero
    reprehenderit nemo nisi suscipit voluptatibus, nobis optio delectus
    aperiam iste non excepturi voluptas.
  </p>
  <button>바로가기1</button>
  <p>
    Laboriosam nam, culpa rerum, error qui magnam delectus ut dolorem fugit
    incidunt, possimus voluptas? Porro, quis et. Quasi, minus cumque,
    perspiciatis magni id at facere, non voluptate optio aliquid repellat.
  </p>
  <button>바로가기2</button>
  <p>
    Suscipit blanditiis doloremque, voluptatum optio delectus debitis
    dolores dignissimos quis, magnam laudantium quas numquam perferendis,
    repellat modi doloribus neque aut nisi tempora ea sint natus
    necessitatibus! Voluptates autem omnis quod?
  </p>
  <button>바로가기3</button>
</div>

위 예시에서 p 요소와 buttom 요소가 한 세트로 반복이 되고 있다. 이런 경우 각 세트 사이에 여백을 주고 싶을때, 인접 형제 선택자로 margin을 줄 수 있다.

인접 형제 선택자 예시 결과 화면

일반 형제 선택자 General sibling combinator

형제 요소들 중 특정 요소만 선택한다. 인접하지 않은 형제들도 선택한다.

p ~ a {
	color: tomato;
}

p 요소와 형제인 a 요소를 모두 선택하고 있다.

<div>
  <p>이것은 paragraph 요소입니다.</p>
  <span>이것은 span 요소입니다.</span>
  <a href="#">Link</a>
  <p>이것은 paragraph 요소입니다.</p>
  <span>이것은 span 요소입니다.</span>
  <p>이것은 paragraph 요소입니다.</p>
  <a href="#">Link</a>
</div>