[css] css 선택자(selector) 의 종류와 예시

css 선택자

 

css 선택자란?

우리가 html 파일을 만들었다면 각각의 태그에 다르게 css 를 설정 할 것입니다. 이 때, 어느 요소에 스타일을 적용할지 알려주는 방식이 바로 css 선택자 입니다.

선택자가 어떻게 쓰이는지 확인해볼까요?

div {     color: black;     background-color: yellow; } 

div 태그들에게 css 를 주기 위해서 div 라는 선택자를 사용하였습니다. 이렇게 되면 html 문서에 모든 div 태그들에는 { } 안에 적용해준 css 속성값들이 적용이 됩니다. div 처럼 태그의 이름 말고도 선택자를 주는 방식이 굉장히 다양한데 이를 알아보도록 하겠습니다.

 

선택자의 종류

 

[ 선택자를 하나만 쓸 경우 ]

 

1. 전체 선택자
   • 전체 선택자는 * 을 사용하여 나타냅니다.
   • html 의 모든 태그에 대하여 적용합니다.
   • * { margin: 0 auto; }
2. 태그 선택자
   • 태그 선택자는 태그의 이름 을 사용하여 나타냅니다.
   • 태그명이 선택자와 같은 태그들에 대하여 적용합니다.
   • p { color: red; }
3. 클래스 선택자
   • 클래스 선택자는 .클래스이름 을 사용하여 나타냅니다.
   • 클래스가 클래스이름과 같은 태그들에 대하여 적용합니다.
   • .ClassName { width: 100px; }
4. ID 선택자
   • ID 선택자는 #아이디이름 을 사용하여 나타냅니다.
   • ID가 ID 이름과 같은 태그에 대해서 적용합니다.
   • #IdName { position: fixed; }

 

[ 선택자를 여러 개 쓸 경우]

 

선택자를 여러 개 쓰는 경우를 복합 선택자라고 합니다. 복합 선택자에도 여러 가지 종류가 있어 이에 대해서 알아보겠습니다.

1. 하위 선택자
   • 하위 선택자는 선택자 사이를 공백을 사용하여 나타냅니다.
   • 앞 요소의 자손인 뒷 요소를 선택합니다.
   • section ul { text-shadow: none; }

2. 자식 선택자
   • 하위 선택자는 선택자 사이를 > 를 사용하여 나타냅니다.
   • 앞 요소의 자식 인 뒷 요소를 선택합니다.
   • section > ul { text-shadow: none; }

 

자손과 자식의 차이는 무엇일까요?

자손은 자식을 포괄하는 의미입니다.

자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 자식 요소에만 적용합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[ 하위 선택자 ]

[ 자식 선택자 ]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 인접 형제 선택자
   • 인접 형제 선택자는 선택자 사이를 + 를 사용하여 나타냅니다.
   • 앞 요소 바로 뒤의 뒷 요소를 선택합니다.
   • h1 + ul { color: red; }
4. 일반 형제 선택자
   • 일반 형제 선택자는 선택자 사이에 ~ 를 사용하여 나타냅니다.
   • 앞 요소 뒤에 있는 모든 뒷 요소를 선택합니다.
   • h1 ~ ul { color: red; }
   형제라는 건 무엇일까요?
5. 같은 부모를 가지는 요소들을 형제 라고 합니다.

[ 인접 형제 선택자 ]

 

 

 

 

[ 일반 형제 선택자 ]

 

 

속성 선택자

속성 선택자는 각 태그가 가지고 있는 그 속성에 접근하는 방식입니다. 생각 외로 활용도가 높으며 저같은 경우에도 크롤링를 할 경우에도 적절한 id 와 class 이름이 없을 경우, 애용합니다.

• 태그[속성]
  • 속성이름 에 해당되는 속성을 가진 태그를 선택합니다.
  • a[href] { font-size: 10px; }

• 태그[속성="변수"]
  • 속성 이 속성값이 변수 인 태그를 선택합니다.
  • a[href="http://www.naver.com"] { color: black; }

• 태그[속성~="변수"]
  • 속성 의 속성값이 변수 를 포함하는 태그를 선택합니다.
  • a[href~="naver"] { color: black; }

• 태그[속성^="변수"]
  • 속성 의 속성값이 변수 로 시작하는 태그를 선택합니다.
  • a[href^="http"] { color: black; }

• 태그[속성$="변수"]
  • 속성 의 속성값이 변수 로 끝나는 요소를 선택합니다.
  • a[href$="com"]{ color: black; }

• 태그[속성*="변수"]
  • 속성 의 속성값이 변수 를 포함하는 태그를 선택합니다.
  • a[href*="naver"] { color: black; }

태그[속성~="변수"] 와 태그[속성*="변수"] 의 차이는 무엇일까요?

~ 은 포함여부를 단어를 기준으로 판단하고 * 는 문자열 기준으로 판단합니다.

다음과 같은 상황에서 navers 는 어떻게 될까요?

~ 은 naver와 navers 는 단어가 다르기 때문에 선택을 못하고

* 은 navers 는 naver 라는 문자열을 포함하기 때문에 선택을 하게 됩니다.

• 태그[속성|="변수"]
  • 속성 의 속성값이 변수 이거나 변수 로 시작하는 태그를 선택합니다.
  • a[href|="http"]{ color: black; }