[CSS] CSS 선택자(selector) 와 선택자 우선순위

선택자(selector)

태그 즉 element(요소)에 css스타일을 적용할때 각각의 요소들마다 세분화하여 스타일을 지정할 수 있고 선택자를 잘 활용할 경우 재활용성과 중복의 제거가 일어나서 유지보수에 효과적이다.

id 선택자 : id 선택자는 태그에 id=""로 속성을 줄 수 있으며 id선택자는 해당 html에서 단 한번만 선언될 수 있다. (여러번 사용이 가능하나 선택자 이름이 중복되서는 안된다.)

id속성이 적용된 태그에 스타일을 적용하고자한다면 css파일에서 #으로 선언하여 해당 속성이 적용된 태그에 스타일을 적용할 수 있다.

사용방법 : #first {...}

class 선택자 : class 선택자는 태그에 class=""로 속성을 지정해 줄 수 있으며 id 선택자와 다르게 많은 태그들에 사용할 수 있고 id 선택자보다 조금 더 포괄적인 부분 또는 많은 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용한다. 

class속성을 사용한 태그에 스타일을 적용하고 싶으면 css파일에서 .(점)과 함께 속성명을 적고 스타일을 작성한다.

사용방법 : .second {...}




일반 선택자 : class 선택자 보다 더 포괄적인 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용된다. 

사용법은 다른 태그들과 다르게 태그명만 작성하고 중괄호 안에 스타일 속성을 작성하면 된다.

사용방법 : div {...}

전체 선택자 : 모든 태그를 가르키며 화면 전체의 모든 태그에 스타일을 적용할 수 있다.

사용방법 : * {...}

자식 선택자 : 자식 선택자는 깊이가 1인 자식 요소에만 스타일을 적용한다.

<div>

<p>1</p>

<p>2</p>

<span><p>3</p></span>

</div>

자식 선택자 사용방법 : div > p {...}

> 를 사용하면 자식선택자를 선택한다. 자식선택자는 자기자신태그 바로 아래있는 태그들이다.  깊이가 1인 선택자들이다. 1과 2는 선택되지만 span태그안에이는 p태그는 선택되지 않는다.

자손 선택자 : 자손 선택자는 지정한 모든 하위 요소에 스타일을 적용한다. (깊이 제한x)

<div>

<p>1</p>

<p>2</p>

<span><p>3</p></span>

</div>

자손 선택자(후손 선택자, 하위 선택자) 사용방법 : div p {...}

자손 선택자 사용하면 1,2,3 모두를 선택한다. 깊이가 1보다 크더라도 해당 태그를 모두 가리킨다.

인접 형제 선택자 : 가장 가까운 형제 요소에 스타일을 적용한다.

사용방법 : h1 + p { text-decoration: none}

형제 선택자 : 형제 요소에 스타일을 적용한다.

사용방법 : h1 ~ p { text-decoration: none}

[속성] 선택자 : 지정한 속성에 스타일을 적용한다.

사용방법 : a[href] { background : green }

[속성=값] 선택자 : 특정 값을 갖는 속성에 스타일을 적용한다.

사용방법 : a[target = "_blank"] { background : green }

ex) target 속성 값이 _blank 이면 스타일 적용

[속성 ~=값] 선택자 : 여러 값 중 특정 값이 포함된 속성에 스타일을 적용한다.(단어별)

사용방법 : [class ~= "button"] {color : green }

ex) class 속성 값으로 button이 포함된 요소에 스타일 적용

[속성 |=값] 선택자 : 특정 값이 포함된 속성에 스타일을 적용한다.(하이픈 포함 단어별)

사용방법 : a[title |= "us"] { background : green }

ex) title 속성 값이 "us" 이면 스타일 적용

[속성 ^=값] 선택자 : 특정 값으로 시작하는 속성에 스타일을 적용한다.

사용방법 : a[title ^= "us"] { background : green }

ex) title 속성 값이 "us"로 시작하면 스타일 적용

[속성 $=값] 선택자 : 특정 값으로 끝나는 속성에 스타일을 적용한다.

사용방법 : a[href $= "hwp"] { background : green }

ex) href를 속성으로 가지고 있으면서 속성 값이 "hwp"로 끝나면 스타일 적용

[속성 *=값] 선택자 : 값의 일부가 일치하는 속성에 스타일을 적용한다.

사용방법 : [href *= "google"] { background : green }

ex) title 속성 값에 "google" 이라는 단어가 포함되어 있으면 스타일 적용

선택자관련해서 정리가 아주잘된 블로그가 있으니 참조할것

http://www.nextree.co.kr/p8468/

# 선택자 우선순위

기본적으로 뒤쪽에 작성된 CSS가 우선순위가 높고 포괄적이지 않고 명시적이고 구체적일수록 그 효과를 최종적으로 적용시켜준다. 

!important --> 인라인 속성(inline style attribute) --> id --> class, 다른 attribute, 수도클래스(:first-child같은것) --> tag element, 수도엘레먼트(::before같은것) 순으로 우선순위가 높다.

우선순위가 같다면 개수가 많은 CSS가 우선순위가 높다.

CSS를 적용하다보면 동일한 속성을 지정해도 내가 원하는 효과가 우선순위에서 밀려 제대로 적용되지 않는 경우가 발생한다. 

이럴경우 해당 속성에다가 !important를 작성하면 최우선으로 속성이 적용된다. 

하지만 !important는 유지보수시 문제를 발생시킬 수 있으므로 사용하지 않도록 하는게 좋다.

스타일 적용 우선 순위는 포괄적인것부터 적용된 후 점차 세분화된 스타일이 적용된다.

1번으로 일반선택자 2번으로 class선택자 3번으로 id선택자가 스타일에 적용되게된다.

결국 일반선택자로 background를 빨간색으로 만들더라도 

class선택자로 background css속성을 파란색으로 주면 파란색화면이 나타나게되고

id선택자 속성으로 검정색 배경화면css속성을 지정하면 

앞에 일반선택자와 class선택자가 지정한 속성은 무시되고 

가장 세분화되어 스타일 속성을 지정해주는 id선택자로 지정된 스타일 속성이 최종적으로 적용되게된다.

추가적으로 다른 방법으로도 우선순위가 변경될 수 있다.

인라인CSS > 내부CSS > 외부CSS 

-외부CSS를 사용하더라도 인라인CSS를 사용하면 최종적으로 인라인CSS가 적용된다.