1. 태그 선택자
현재 HTML 문서 내의 태크를 직접 선택하는 선택자이다.
[작성법]
태그명 {
CSS코드;
}
[예시]
strong{
background-color : red;
}
<strong>css가 적용될 부분<strong>
2. id 선택자
태그에 지정한 id를 선택하는 선택자
[작성법]
#id명{
css코드;
}
[예시]
#li1 {
color : red;
}
#li2 {
color : green;
}
<ol>
<li id = "li1">적용1</li>
<li id = "li2">적용2</li>
<ol>
3. class 선택자
태그에 지정한 class를 선택하는 선택자
[작성법]
.class명{
css코드;
}
[예시]
.test1{
background-color : red;
}
.test2{
color : blue;
}
<ol>
<li class = "test1">적용1</li>
<li class = "test1">적용2</li>
<li class = "test2">적용3</li>
<li class = "test2">적용4</li>
<ol>4. 모든 요소 선택자(*)
단독 또는 다른 선택자와 함께 사용 가능하며 모든 요소를 선택
5. 기본 속성 선택장
태그에 작성된 특정 속성을 선택 (id, class도 선택 가능하지만 id, class는 따로 #과 . 을 사용한다)
[작성법]
선택자[속성명="속성값"]{
css코드;
}
[예시]
p[name = "name-1"]{background-color: green;}
p[name = "name-2"]{background-color: blue;}
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>6. 자식 선택자(>)
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 {css코드;}
[예시]
#parent-ul >li { background-color: orange;}
#parent-ul > li > span {background-color: red;}
<ul id="parent-ul">
<li>자식1</li>
<li>
<span>자식2</span>
</li>
<li>자식3</li>
</ul>
7. 후손 선택자 (띄어쓰기)
지정된 요소의 하위에 존재하는 요소를 선택
[작성법]
선택자1 선택자2 {css코드;}
선택자1: 부모 요소
선택자2: 후손 요소
8. 반응 선택자
사용자의 움직임에 반응하여 스타일이 달라지는 선택자
[작성법]
- 요소를 클릭하고 있는 경우(:active)
- 요소에 마우스가 올라가는 경우(:hover)
[예시]
.div-cls{
width:200px;
height: 200px;
border: 1px solid black;
background-color: #ddd;
/* 아래쪽 요소와의 간격 */
margin-bottom: 30px;
/* 요소에 사우스 커서가 올라가면 손가락 모양으로 바꿔줌 */
cursor: pointer;
}
#active-test:active{
background-color: turquoise;
}
#hover-test:hover{
background-color: tomato;
width: 230px;
height: 230px;
<div class="div-cls" id="active-test">:active 테스트</div>
<div class="div-cls" id="hover-test">:hover 테스트</div>
/* 이 경우 클릭하여 active시 or 마우스 오버 시 변화하는 박스가 생성된다*/
}9. 상태 선택자
입력 양식(input 등)의 상태에 따라 선택되는 선택자
[작성법]
:focus
-> 요소에 초점이 맞춰졌을 때문에
:checked
-> 요소가 체크되었을 때(radio, checkbox)
:enabled / disabled
-> 요소가 사용 가능한 / 불가능한 상황일 때10. 동위 선택자
동위 관계(동일한 위치 == 형제 관계)에서 뒤에 위치한 요소를 선택하는 선택자
[사용법]
A
B
B
1) A 바로 뒤에 있는 B요소 하나를 선택(+)
A선택자 + B선택자{css코드;}
2) A 뒤에 있는 모든 B요소를 선택(~)
A선택자 ~ B선택자{css코드};
[예시]
#div1 + div{
/*이 경우 아래 2번이 선택된다.*/
background-color : green;
}
#div3 ~ div{
/*이 경우 아래 4번, 5번이 선택된다.*/
background-color : red;
}
<div id="div1">1번입니다.</div>
<div>2번입니다.</div>
<div id="div3">3번입니다.</div>
<div id="div4">4번입니다.</div>
<p>관련 없는 태그입니다.</p>
<div id="div5">5번입니다.</div>
11. 문자열 속성 선택자
속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자
[사용법]
1) 선택자[속성명 ~= "특정값"] {css코드;}
-> 띄어쓰기로 구분되어있는 여러 속성값이 작성된 속성 중
속성값이 특정 값을 단어로 포함하는 요소를 선택
2) 선택자[속성명 |= "특정값"] {css코드;}
-> 속성값이 특정값을 단어로 포함하는 요소를 선택
단 "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.
3) 선택자[속성명 ^= "특정값"] {css코드;}
-> 속성값이 특정값으로 시작하는 요소를 선택
4) 선택자[속성명 $= "특정값"] {css코드;}
-> 속성값이 특정 값으로 끝나는 요소를 선택
5) 선택자[속성명 *= "특정값"] {css코드;}
-> 속성값이 특정 값을 포함하는 요소를 선택
12. 일반 구조 선택자
형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
위치를 기준으로 구분한다(중요)
:first-child - 형제 관계 요소 중 첫번째 요소 선택
:last-child - 형제 관계 요소 중 마지막 요소 선택
:nth-child(n) - 형제 관계 요소 중 n번째 요소 선택
:nth-last-child - 형제 관계 요소 중 뒤에서 n번째 요소 선택 [예시]
#test1>p:first-child{
/* 이 경우 요소 1이 선택된다. */
css코드;
}
#test1>pre:first-child{
/* 이 경우 아무것도 선택되지 않는다
first-child를 검사했을 경우 pre타입 태그가 아니다
*/
}
#test1>p:last-child{
/* 이 경우 요소 6이 선택된다. */
css코드;
}
#test1>p:nth-child(2){
/* 이 경우 요소 2가 선택된다. */
css코드;
}
#test1>p:nth-last-child(3){
/* 이 경우 아무것도 선택되지 않는다
뒤에서 3번째 요소를 검사했을 때 p타입이 아니기 때문.
*/
css코드;
}
<div id="test1">
<p>요소1</p>
<p>요소2</p>
<p>요소3</p>
<pre>요소4</pre>
<p>요소5</p>
<p>요소6</p>
</div>
13. 형태 구조 선택자
선택한 형제 요소 중 특정 형태를 선택하는 선택자
:first-of-type - 같이 선택된 형제 관계 중 첫 번째 요소
:last-of-type - 같이 선택된 형제 관계 중 마지막 요소
:nth-of-type - 같이 선택된 형제 중 n번째 요소 선택
:nth-last-of-type - 같이 선택된 형제 관계 요소 중 뒤에서 n번째 요소 선택 [예시]
#test1 > pre:first-of-type {
/* 이 경우 요소0이 선택된다. */
css 코드;
}
#test1 > pre:last-of-type {
/* 이 경우 요소4가 선택된다.
타입인 pre로 먼저 묶이고 그 다음
마지막 요소가 선택되기 때문
*/
css 코드;
}
#test1 > p:nth-of-type(4) {
/* 이 경우 요소5가 선택된다.
p태그로 묶이고 그 중 4번째 요소가
선택되기 때문에
*/
css 코드;
}
#test1 > pre:nth-last-of-type(2) {
/* 이 경우 요소0이 선택된다.
pre태그로 묶이고 그 중 뒤에서 2번째 요소가
선택되기 때문에
*/
css 코드;
}
<div id="test1">
<pre>요소0</pre>
<p>요소1</p>
<p>요소2</p>
<p>요소3</p>
<pre>요소4</pre>
<p>요소5</p>
<p>요소6</p>
</div>14. 부정선택자
괄호 내 선택자를 제외한 나머지 요소를 선택
[사용법]
선택자1 : not(선택자2)
[예시]
만약 2의 배수의 자식 요소를 제외하고 선택하려고 한다면?
#test>li:not(:nth-child(2n)){
css코드;
}
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>15. 기타 선택자
:only-child - 자식 요소가 하나밖에 없을 때 선택
:only-of-type - 자식 요소 중 지정된 형태와 같은 자식이 하나뿐일 때 선택
:empty - 자식 요소가 없는 요소를 선택
(** 여기서 자식 요소가 없다는 것은 띄어쓰기, 태그, 글자 모두 없는 것을 의미한다.**)
선택자 우선순위
1순위 - !important 속성을 부여한 요소
2순위 - 태그 요소에 직접 작성한 inline-style 속성
3순위 - 아이디 선택자
4순위 - 클래스 선택자
5순위 - 태그 선택자
1순위와 2순위의 방법은 실무에서 거의 사용하지 않는다
공부와 일상