알면 편합니다. CSS 선택자 (CSS Selector) 1부

안녕하세요 키다리디자이너입니다.

 

오늘은 코딩할때 알아두면 편한 CSS의 선택자에 대해 알아보기로 하겠습니다.

 

선택자(selector)는 말 그대로 CSS에서 지정한 조건에 따라 해당 부분만 따로 속성을 주거나 속성을 제거할 수 있는 코딩 방법입니다.다시 말해 코딩 내용중에 ~~가 있다면 그 부분만 따로 스타일을 지정하거나 없앨 수 있다는 것입니다.

잘 이해가 되지 않아도 괜찮습니다. 아래에 작성된 내용을 하나씩 보면 금방 이해가 되실거에요.

 

 

1. >

'>'는 특정 태그 아래에 태그나 클래스등을 모두 선택합니다.

아래 코드를 보겠습니다.

 

 

이것의 실행 결과입니다.

CSS를 정의한 부분에 ul>li가 보이실 것입니다. 바로 이런 것들이 선택자이며 정해진 조건에 따라 코딩에 반영됩니다.

 

ul>li 은 ul태그 밑에 모든 li클래스를 선택하여 빨간색 배경을 입힙니다.

그러나 ol태그 아래에 있는 li는 빨간색으로 바뀌지 않습니다.

 

ul>.first는 class가 first인 부분을 지정합니다.

 

 

2. +

'+'는 뒤에 작성한 태그 중 조건에 맞는 첫번째 것을 선택합니다.

 

 

li+p는 li태그 다음에 나오는 첫번째 p태그를 선택하게 됩니다.

li태그 안에 p태그는 li 안에 있는 태그이기 때문에 적용되지 않았습니다.

 

 

 

3. ~

~는 뒤에 작성한 태그 중 조건에 맞는 모든 것을 선택합니다.

 

 

결과 

마찬가지로 li태그 안에 p태그는 li 안에 있는 태그이기 때문에 적용되지 않았습니다.

 

 

4. []

해당 태그의 하위 속성이 일치하는 것을 선택합니다.

 

 

위처럼 input의 속성이 text인 경우에만 배경색을 red로 지정했습니다.

아래는 실행 결과입니다.

 

5. *=

해당 태그의 하위 속성에 텍스트 일치 여부로 선택합니다.

 

 

img태그의 속성 중 하나인 alt태그의 텍스트가 '네이버'와 일치하는 것을 선택하였습니다.

 

 

6. ^=

해당 태그의 하위 속성에 특정 텍스트로 시작하는 것을 선택합니다.

 

 

img태그의 속성 중 하나인 alt태그의 텍스트가 로 시작하는 것을 선택하였습니다.

 

 

 

7. $=

^=과 반대로 해당 태그 하위 속성의 마지막 부분에 일치하는 텍스트가 있는 것을 선택합니다.

  

 

결과

 

 

여기까지 기본적인 선택자에 대해 알아봤습니다.

선택자라는 것이 다소 생소한 내용들일지 모르겠으나 잘만 이용하면 코딩의 양을 많이 줄여주는 역할을 하기도 합니다.

다음 포스팅에는 CSS3의 부정, 유사선택자에 대해 알아보도록 하겠습니다.