🎨 CSS 선택자(Selectors) 문법 총정리 모음

기본 선택자

 

결합 선택자

요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다.

 

일치 선택자

E와 F를 동시에 만족하는 요소 선택

#EF{
  margin: 0 auto;
  width: 1080px;
}

​

자식 선택자

E의 자식 요소 F를 선택

#E>F{
  margin: 0 auto;
  width: 1080px;
}

​

자손 선택자

E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택.

자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능

#E F{
  margin: 0 auto;
  width: 1080px;
}

---

동위 선택자

동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 부른다.

형제 선택자 같은 경우 자신 기준 다음에 있는 형제만 선택이 가능하고 이전의 형제는 선택이 불가능하다.

 

인접 형제 선택자

E의 다음 형제 요소 F 하나만 선택

#E+F{
  margin: 0 auto;
  width: 1080px;
}

 

일반 형제 선택자

E의 다음 형제 요소 F 모두 선택

#E~F{
  margin: 0 auto;
  width: 1080px;
}

---

그룹 선택자

여러 선택자를 한꺼번에 적용하고 싶을때, 선택자들을 쉼표(,)로 구분하여 연결하면 그룹으로 스타일이 적용된다.

h2 { color: navy; }

h2, h3 { text-align: center; }

h2, h3, p { background-color: lightgray; }

---

의사 선택자

보통 선택자는 HTML 요소(element)를 직접적으로 선택하여 스타일링한다. 하지만 의사(가상) 선택자는 HTML요소를 직접적으로 선택하지 않고, 해당 요소의 상태(state)에 따라 선택하여 꾸며주는 것을 의미한다고 본다.

예를 들어 <a> 태그 같은 경우 처음 방문한 링크와 이미 전에 한번 방문했던 링크의 색깔이 다른걸 한번 쯤 본 적이 있을 텐데, 링크 요소의 상태에 따라 색상값이 다르게 설정이 되어 있기 때문이다.

의사(가상) 선택자에는 대표적으로 의사 클래스와 의사 요소가 있다.

 

의사 요소 

의사 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 줄 수 있다.

선택자	설명
::first-letter	콘텐츠의 첫글자를 선택한다.
::first-line	콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after	콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before	콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection	드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.

/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }

/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line   { color: red; }

/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
   content: " HTML!!! ";
   color: blue;
}

/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
   content: " CSS3!!!";
   color: red;
}

/* 드래그한 콘텐츠를 선택한다 */
::selection {
   color: red;
   background: yellow;
}

의사 요소를 표현할때 보통 콜론(:)을 사용하지만 가상 클래스와의 구분을 하기 위해 이중콜론(::)의 사용을 권장하는 편이다. 이에 대해선 아래 포스팅을 참고하길 바란다.

[CSS] 📚 :before :after 와 ::before ::after 차이 정리

---

의사 클래스

의사 클래스(pseudo-class)란 html 요소의 특별한 상태(state)를 명시할 때 사용하는 선택자를 말한다. 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 스타일링을 한다고 보면 된다.

 

동적 의사 클래스

링크(anchor) 태그의 상태에 따라 각각의 스타일을 지정하는 전용 선택자이다.

선택자	설명
:link	셀렉터가 방문하지 않은 링크일 때
:visited	셀렉터가 방문한 링크일 때
:hover	셀렉터에 마우스가 올라와 있을 때
:active	셀렉터가 클릭된 상태일 때
:focus	셀렉터에 포커스가 들어와 있을 때

/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }

/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }

/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }

/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }

 

상태 의사 클래스

입력(input) 태그의 상태에 따라 각각의 스타일을 지정하는 전용 선택자이다.

선택자	설명
:checked	셀렉터가 체크 상태일 때
:enabled	셀렉터가 사용 가능한 상태일 때
:disabled	셀렉터가 사용 불가능한 상태일 때

/* input 요소가 사용 가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:enabled + span {
   color: blue;
}

/* input 요소가 사용 불가능한 상태일 때,
    input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:disabled + span {
   color: gray;
   text-decoration: line-through;
}

/* input 요소가 체크 상태일 때,
    input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:checked + span {
   color: red;
}

 

form 정합성 체크 선택자

선택자	설명
:valid(셀렉터)	정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터)	정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

input[type="text"]:valid {
   background-color: greenyellow;
}

input[type="text"]:invalid {
   background-color: red;
}

 

​부정 선택자

E중에 S가 아닌것만 선택

E:not(S)

/* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
input:not([type=password]) {
   background: yellow;
}

---

구조 의사 클래스

구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 수학적인 값으로 선택할 수 있다.

 

FIRST CHILD

형제 요소 중 첫번째 요소와 선택한 타입이 일치하면 선택

span:first-child /* 첫번째 자식(span)과 선택자(span)가 일치하면 적용 */

p:first-child  /* 첫번째 자식(span)과 선택자(p)가 불일치하여 미적용 */

​

LAST CHILD

형제 요소 중 마지막 요소와 선택한 타입이 일치하면 선택

p:last-child  /* 마지막 자식(p)과 선택자(p)가 일치하면 적용 */

span:last-child /* 마지막 자식(p)과 선택자(span)가 불일치하여 미적용 */

 

NTH CHILD

형제 요소 중 n번째 요소와 선택한 타입이 일치하면 선택

타입:nth-child(n)

/* span:nth-child(1) === span:first-child */

 

FIRST OF TYPE / LAST OF TYPE

선택한 타입들 형제 요소 중에 첫번째 요소를 선택

선택한 타입들 형제 요소 중에 마지막요소를 선택

 

NTH OF TYPE

선택한 타입들 형제 요소 중에 n번째 요소를 선택

E:nth-of-type(n)

---

속성 선택자

태그 내에 특정 속성(attribute)의 값을 가지고 있는​ HTML 요소를 선택한다.

 

속성 선택 문법 기호

 

ATTR

속성 attr을 포함한 요소 선택

E[attr]

​

ATTR=VALUE

속성 attr을 포함하며 속성 값이 value인 요소 선택

E​[attr=value]

​

ATTR^=VALUE

속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택

E​[attr^=value]

​

ATTR$=VALUE

속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

​E[attr$=value]

​

ATTR*=VALUE

속성 attr을 포함하여 속성 값이 정확히 value이거나 value를 포함해 가 포함되는 요소 선택

E​[attr*=value]

 

ATTR!=VALUE

속성 선택자에 not equals 문법은 존재하지 않는다. 따라서 기존 선택자 문법을 이용해 조합하여 사용하여야 한다.

🚀 속성 선택자 not equal 구현하기 [attr!=value]

---

# 참고자료

http://www.tcpschool.com/css/css_selector_basic

https://webdir.tistory.com/338

https://lalacode.tistory.com/6