1. class와 id selector 태그 결합
1) 일반태그와 id선택자
- 형태 : 일반태그 + .class { 스타일 }
- 예)
html
<p class="third-line">나는 p태그, class도 있고 id도 있다.</p>
css
p.p-tag {
color: gray;
}
결과 : p태그 중, class값이 "third-line"인 태그는 글씨 색을 회색으로 스타일한다.
2) 일반태그와 id선택자
- 형태 : 일반태그 + #id { 스타일 }
- 예)
html
<p class="p-tag" id="firth-line" style="font-size: 50px; color: red; text-decoration: none;">근데 내가 대빵</p>
css
p#third-line {
text-decoration: underline;
}
결과 : p태그 중에서 id가 "third-line"인 태그는 밑줄 스타일로 적용한다.
3) 선택자 내부의 일반태그
-
형태 :
.class 일반태그 { 스타일 }
#id 일반태그 { 스타일 } -
예)
html
<p class="pre">
이건 적용됩니다! 노란색배경!
</p>
css
.pre span {
background-color: yellow;
}
- 예2) 길게 작성 가능
html
<div class="a">
<div>
<header class="b">
<h1 class="pre">
<span>제목! 노란색 배경 나옴!</span>
<span class="title">이것도 나옴!</span>
</h1>
<span>이건 적용안 됨</span>
</header>
</div>
<span>이건 적용안 됨
</div>
css
.a div .b .pre span {
background-color: yellow;
}
결과 : a라는 클래스 안에 div 밑에 클래스가 b안에 클래스가 pre인 span태그들...
1. 선택자의 우선 순위
1) inline styling : 태그안에 스타일 작성 부분
2) id 선택자
3) 클래스 선택자
4) 일반 태그
결론 : tag <<<<< class <<<< id <<<<<< inline css
