CSS:선택자
틀:CSS. css에 대한 문서들을 담아두기 위한 틀.
개요
어디에 스타일을 적용할 것인지 그 위치를 지정해주어야 한다. 이를 위한 도구 선택자.
선택자
의도 | 설명 | 선택자 형태 |
---|---|---|
범용선택자 | 모든 곳에 적용함을 알려주는 선택자. | * |
타입선택자 | 특정 태그에 적용되는 내용을 지정하는 선택자. | 태그명 |
class선택자 | 클래스에 대해 적용함을 알려주는 선택자.
여러 클래스를 적용할 수도 있다. <class="클래스1 클래스2"...> 형식으로 띄어쓰기를 통해 다양한 클래스를 적용할 수 있다. |
.클래스명 |
id선택자 | id 속성에 따라 적용하는 영역을 찾는다.
일반적으로 id는 한번만 사용되기에, 유일하게 적용할 부분에서 사용한다. |
#아이디 |
실사용
의도 | 설명 | 선택자 형태 |
---|---|---|
하위요소 선택 | 선택자 사이에 띄어쓰기로 구분해준다.
다음 예시는 특정 클래스 안에 특정아이디를 가진 요소들을 선택하는 방법이다. |
.클래스명 #아이디 |
동시선택 | 하위의 요소를 선택하기 위해선 선택자들끼리 띄어쓰기로 구분하는데, 선택자들을 붙여 쓰면 동시에 갖고 있어야 함을 의미한다. | .클래스명.클래스명 |
가상선택자
의도 | 설명 | 선택자 형태 |
---|---|---|
클래스 안의 태그를 선택하고 싶은 경우 | '>' 를 이용하여 태그를 지정한다. | .클래스명 > 태그명{....} |
마우스가 올려진 경우에 적용하고 싶을 때 | ':' 를 이용하여 지정한다.
해당 선택자 뒤에 ':hover'를 붙여 적용. |
.클래스명 > 태그명:hover{각종 속성} |