css 그룹핑과 CSS selector

그룹

 

이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶습니다.

그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는

다음과 같이 한꺼번에 스타일을 지정할 수 있습니다.

 

what-is-blockquote, span {

color: green;

}

 

class나 id가 selector일때 태그와 결합할 수 있습니다.

 

p.p-tag {

color: gray;

}

p#third-line {

text-decoration: underline;

}

 

첫 번째는 p태그이면서 p-tag 클래스이다.

두 번째는 p태그이면서 third-line 아이디이다.

라는 뜻입니다.

 

엄청 길게도 작성할 수 있습니다.

.a div .b .pre span {

background-color: yellow;

}

 

다른 예를 하나 들자면

 

div .container li.first-list

 

 

<li>태그인데 "first-list" 클래스인 요소에 css를 적용한다.

그런데 <div>태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다.

는 뜻입니다.

 

selector 우선순위

 

selector

 

inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점

 

p {

font-size: 30px;

}

.p-tag {

font-size: 15px;

}

 

<p class="p-tag">나는 p태그, class가 있다</p>

p태그에 적용된 30px은 1점

p-tag클래스에 적용된 15px는 10점이므로 15px이 적용된 것입니다.

 

이개념을 잘숙지하면 됩니다.

tag <<<<< class <<<< id <<<<<< inline css