[CSS] CSS 선택자

CSS 선택자(Selector)는 HTML 요소(Element)를 찾는 방법이다.

tag로 지정하기

[css]

span {
    color : red;
}

　

id로 지정하기

id 선택자는 HTML에 존재하는 유일한 Element에 적용할 때 사용가능.

[css]

#spantag {
    color : red;
}

[html]　

<span id="spantag"> HELLO World! </span>

　

class로 지정하기

여러 요소에 적용하고자 한다면 class 선택자 활용.

[css]

.spanClass {
    color : red
}

[html]

<span class="spanClass"> HELLO World! </span>

　

요소 선택자 / 아이디 선택자 / 클래스 선택자 외에도 선택자 종류는 다양하게 존재한다.

+ 전체선택자(*) / 가상 클래스 / 수도 클래스 / 종속 선택자 / 하위 선택자 등

 

자손 요소 (중간에 공백으로 구분)

[css]

#test span { color : red }

[html]

<div id="test">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

　

자식 선택 (>): 하위 직계 Element

[css]

#test > span { color : red }

[html]

<div id="test">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

 

 

n 번째 자식 요소 선택

[css]

#test > p:nth-child(2) { color : red }

[html]

<div id="test">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
</div>

　

인접(Adjacent) 형제 선택자

※ 형제 관계: 같은 부모 요소를 가지는 요소.

[css]

h1 + ul { color : blue; }

[html]

<h1>h1 글 입니다.</h1>
<ul>
    <li>테스트1</li>
    <li>테스트1</li>
</ul>
<ul>
    <li>테스트2</li>
    <li>테스트2</li>
</ul>

　

형제 선택자

[css]

h1 ~ ul { color : blue; }

[html]

<h1>h1 글 입니다.</h1>
<ul>
    <li>테스트1</li>
    <li>테스트1</li>
</ul>
<ul>
    <li>테스트2</li>
    <li>테스트2</li>
</ul>

　

속성 선택자

- [속성 ^=값] ; 특정 값으로 시작하는 속성에 스타일 적용

- [속성 $= 값] ; 특정 값으로 끝나는 속성에 스타일 적용

- [속성 *= 값] ; 일부가 일치하는 속성에 스타일 적용하기

a[href] ; <a> 태그 중 href 라는 속성이 있는 요소

a[target="_blank"] ; target 속성의 값이 _blank인 <a> 태그 요소