CSS 작성할때 HTML의 어떤 요소를 선택할 것 인지를 정하는 것이다.
추후에 자바스크립트나 제이쿼리를 공부할때도 CSS의 선택자가 중요하다.
a { /* a태그를 직접 지정한다. */
text-decoration: none;
color:black;
}
#container{
color: black;
}
.fontSize{
font-size: 10px;
{
속성의 존재 여부나 그 값을 활용하여 요소의 스타일을 지정한다.
속성이 존재하면 해당속성에 스타일을 부여할 수 있다.
<a href="http://naver.com" target="_blink"></a>
▶ 속성 존재 유무로 스타일 부여
a[target] {
color: yellow;
}
▶ 속성의 값이 일치할경우 스타일 부여
a[href="http://naver.com"] {
color: yellow;
}
▶ 속성의 값이 시작하는 단어로 포함하면 스타일 부여
a[href^="http://"] {
color: green;
}
▶ 속성의 값이 끝나는 단어로 포함하면 스타일 부여
a[href$=".com"] {
color: green;
}
▶ 속성의 값의 단어를 포함하면 스타일 부여
a[href*="naver"] {
color: black;
}
<li class="study">HTML</li>
<li class="study">javascript</li>
<li class="study">css</li>
<li class="study">jquery</li>
▶첫번째 자식요소에 스타일을 부여
li:first-child {
color: green;
}
▶마지막 자식요소에 스타일을 부여
li:last-child {
color: green;
}
▶ 인덱스를 넣어서 스타일을 부여
▶ nth-child(N) : N번째 자식의 요소에 스타일 부여
▶ odd(홀수), even(짝수)와 같이 스타일을 부여할 수 있음.
li:nth-child(2) {
color: green;
}
<section>
<div>HTML</div>
<p>javascript</p>
<p>css</p>
<div>jquery</div>
<p>react</p>
</section>
<input type="checkbox" name="ch1">
▶ p타입들 중에 첫번째 요소에 스타일 부여
p:first-of-type {
color: blue;
}
▶ p타입들 중에 마지막 요소에 스타일 부여
p:last-of-type {
color: blue;
}
▶ N번째 있는 요소의 스타일 부여
p:nth-of-type(N){
color: blue;
}
▶ 마우스를 올린 대상의 요소에 스타일 부여
section:hover {
color: blue;
}
▶ 체크유무를 이용하여 radio, checkbox의 스타일을 부여
input:checked {
background-color: blue;
}
<li class="study good">HTML</li>
<li class="study">javascript</li>
<li class="study">css</li>
<li class="study">jquery</li>
▶ before after로 앞 뒤로 가상의 요소를 만들어낸다.
.good::before {
content: ' ';
border: 1px solid red;
}
.good::after {
content: ' ';
border: 1px solid red;
}
<p class="study">안녕하십니까 저는 CSS를 배우고 있는 학생입니다.</p>
<p class="study">CSS란? </p>
▶ 각 문장의 첫번째 글자에 스타일을 부여
.stydy::first-letter {
color: red;
font-size: 30px;
}
▶ 각 문장의 첫번째 문장에 스타일을 부여
.stydy::first-line {
color: red;
font-size: 30px;
}
▶ 드래그로 선택된 영역의 스타일을 부여
.stydy::selection {
color: red;
font-size: 30px;
}
<div id="stury">
<h1>HTML</h1>
<span>HTML</span>
<p class="good">HTML</p>
<p>HTML</p>
</div>
▶ study 클래스 밑에 있는 good 클래스
#study .good {
color: green;
}
▶ 바로 밑의 자식 요소의 스타일을 부여함
#study > span {
color: yellow;
}
▶ 요소 바로 뒤에 오는 형재요소에 스타일을 부여함
#study span ~ p {
color: yellow;
}
▶ 앞뒤로 인접해 있는 형재요소에 스타일을 부여함
#study span + h1 {
color: yellow;
}
▶ 다중 선택하여 스타일을 부여
#study h1, #study p {
color: yellow;
}