css_선택자_0

css 에서
선택자 종류

1. 공백

.blue .red{color:red}

이거는 일단 뭐냐면
블루클래스 공백 레드클래스 이렇게 되어있는데
공백의 의미는
무조건 앞에 클래스의 하위(레드클래스)클래스에 효과를 적용시킨다 라는 뜻이다.
그니까
공백이 있으면 무조건 뒤의 클래스에 효과가 적용 되겠구나 라고 알면 된다.

---

2. 점으로이어져있는경우

.blue.red{color:red}

이렇게 이어져있는경우는 뭐냐면,
이건 다중 클래스 다.라고 생각하면 쉽다.
이게 html 에서는 어떻게 되있냐면,

이렇게 되어있다. 블루 띄우고 레드 이렇게 되있는 클래스 명을 css에서 표기할때 .blue.red 이렇게 표기를 한다. 즉 선택자를 두개 등록?한 형태 이다.

이거를 근데 왜 쓰냐면?
AND 거나 OR 이다. 다중선택
이거는 여러개의 조건을 만족하는 선택자이다.
즉, 앞의 선택자도 되고 뒤선택자도 되고, 둘다되고
걍 둘중 하나라도 걸리면 적용되는거다.
즉, 앞,뒤 조건 중 하나라도 맞는 선택자를 찾게되는거다.
(선택자를 두개 등록한 형태이므로 걸릴수있는 폭이 넓어짐 , 즉 둘중하나라도 있으면 선택이 됨.)

그리고

마지막에 걸린 선택자의 효과가 적용이된다.
예를들어
css 에서
.blue{color:blue}
.red{color:red}
이고
html에서는

A

A

이면 일단은 html에서 블루 레드 건 레드불루 건 위에 css에서 볼때는 일단 둘중 하나는 다 걸리게되어있다. 근데 css에서는 순서는 레드가 밑에 있으므로 최종적으로는 빨간색으로 처리가 되는거다.

즉,
html에서
class="red blue" 이렇게
다중선택자로 해놓으면

css에서는

.blue 이렇게 단독인것도 해당되고
.red 이것도 해당되고
그리고 이렇게
.red.blue 이것는 확실히 두개다 라는 조건이니까 적용되고
.blue.red 이것도 그렇게 해당되고
다 걸리는데 이제 위에서 아래 순서로 젤 마지막 효과가 적용된다.

---

3. 점으로이어진선택자와 공백이 합쳐지면

.blue.red .yellow{color:red}

이거는 뭐냐면
블루레드라는 선택자(뭐 두개다일수도있고 둘중 하나만 걸려도 어짜피 다 적용되니까)
의 하위 클래스에 적용이 된다는 뜻이다.
즉 블루레드의 자식클래스(옐로우)에 효과가 적용된다.

---

https://saimplay.tistory.com/79

http://blog.naver.com/PostView.nhn?blogId=ath87&logNo=220364319713