CSS의 선택자인 가상클래스선택자, 가상요소선택자, 속성선택자에 대해서 알아보자
가상클래스선택자
CSS에서도 "동작"을 제어하는 가상클래스 선택자를 제공한다.
Hover 선택자
- [ABC:hover] : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
- 코드
<style>
.box {
width:100px;
height:100px;
background-color:orange;
transition:1s;
}
.box:hover{
width:300px;
background-color:royalblue;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
- 의미 : 가로/세로 100px, color orange인 box요소에 마우스 커서가 올라가 있으면 가로 300px짜라 color royalblue box로 1초동안 변한다(동작)
Active 선택자
- [ABC:active] : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
- 코드
<a href="www.naver.com" src="네이버">네이버</a>
<style>
a.active{
color:red;
}
</style>
</head>
<body>
</body>- 출력화면 : naver 링크를 클릭하는 동안 빨간색으로 변경
Focus 선택자
- [ABC:focus] : 선택자 ABC요소가 focus되면 선택
- 특징 : Focus가 될 수 있는 요소는 HTML 대화형 Contents이다.(input, A, button, label, select 등) 그리고 HTML 대화형 콘텐츠 요소가 아니라고 하더라도 tab index 속성을 사용한 요소도 focus가 될 수 있다.
focus가 되는 요소에 focus가 되면 동작하는 개념 - 예시
<input type="text">
input:focus{
background-color:orange;
}first-Child
- [ABC:first-child] : 선택자 ABC가 형제요소 중 첫째라면, 선택
- 코드
<style>
.fruits span(하위선택자,fruit가 class인 tag의 자식요소인 span tag):first-child{
color:red;
}
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>
</body>- 출력화면
last-Child
- [ABC:last-child] : 선택자 ABC가 형제요소 중 막내라면 선택
- 코드
<style>
.fruits span:last-child{
color:red;
}
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
</div>
</body>- 출력화면
Nth-Child
- [ABC:nth-child(n)] : 선택자 ABC가 형제요소 중 (n)째라면 선택
- n은 0부터 시작(2n : 0,2,4...)
- 코드
<style>
.fruits *(전체 자식 tag):nth-child(2){
color:red;
}
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
</div>
</body>-
출력화면
-
짝수번째 선택 : fruits *:nth-child(2n)
-
홀수번째 선택 : fruits *:nth-child(2n+1)
-
2번째 요소부터 시작하기(선택하기) : fruits *:nth-child(n+2)
부정선택자
- [ABC:not(xyz)] : 선택자 XYZ가 아닌 ABC 요소 선택
- 코드
<style>
.fruits div:not(span){
color:red;
}
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
</div>
</body>가상요소선택자
가상요소선택자=가상태그선택자(혼용)
before선택자
- [ABC::before] : 선택자 ABC 요소의 내부 앞에 내용(contents)을 삽입.
after선택자
- [ABC::after] : 선택자 ABC 요소의 내부 뒤에 내용(contents)을 삽입.
::before, ::after 선택자에는 content 속성이 비어있더라도 들어가 있어야 한다
속성선택자
속성의 이름을 가지고 선택하는 선택자
[ABC]
- 의미 : 속성 ABC를 포함한 요소 선택
- 코드 : disabled이라는 속성을 가지고 있는 요소를 선택해서 color를 red로 하겠다는 뜻
ex> <input type="text" value="Sharon" disabled>
[disabled]{
color:red;
}- 일반적인 속성을 찾는 데에는 적합하지 않음 : type을 속성으로 한 요소 전부가 찾아짐
ex> <input type="text" value="Sharon" disabled>
<input type="password" value="1234">
<input type="text" value="ABCD">
[type]{
color:red;
}[ABC="XYZ"]
- 의미 : 속성 ABC를 포함하고 값이 XYZ인 요소 선택
- 코드 : 속성 type을 포함하고 값(value)이 ABCD인 요소 선택
ex> <input type="text" value="Sharon" disabled>
<input type="password" value="1234">
<input type="text" value="ABCD">
[type="ABCD"]{
color:red;
}
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ