5. 선택자_가상 클래스(1)
가상 클래스(1)
: 기호 사용
hover
선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
예) index.html
<body>
<div class="box"></div>
</body>예) main.css
.box {
width: 100px;
height: 100px;
background-color: orange;
transition: 1s;
}
/* 마우스 커서를 올리면 변화 */
.box:hover {
width: 300px;
background-color: grey;
}=> :hover를 씀으로써 마우스 커서를 올렸을 때와 안 올렸을 때 변화를 줌
active
선택자 ABC 요소에 마우스 커서가 클릭하고 있는 동안 선택
focus
선택자 ABC 요소가 포커스 되면 선택
사용자와 대화할 수 있는 요소들만 가능
(input, a, button, label, select,,,)
포커스가 가능하지 않은 요소에 포커스를 하고 싶으면
tabindex="-1" 사용
6. 선택자_가상 클래스(2)
가상 클래스(2)
first-child
선택자 ABC가 형제 요소 중 첫째라면 선택
첫째가 아니라면 선택 x
last-child
선택자 ABC가 형제 요소 중 막내라면 선택
막내가 아니라면 선택 x
nth-child(n)
선택자 ABC가 형제 요소 중 (n)째라면 선택
(n)째가 아니라면 선택 x
n은 0부터 시작
짝수: 2n
홀수: 2n + 1
not(ABC)
부정선택자
선택자 ABC를 제외하고 선택
7. 선택자_가상 요소
:: 기호 사용
before
선택자 ABC 요소의 내부 앞에 내용을 삽입, 인라인
content가 필수 속성
.box2::before {
content: '앞!';
}after
선택자 ABC 요소의 내부 뒤에 내용을 삽입, 인라인
content가 필수 속성
.box2::after {
content: '뒤!';
}인라인 요소를 블럭 요소로 바꾸기
=> display: block;
8. 선택자_속성
[ABC]
속성의 이름을 가지고 선택
속성 ABC을 포함한 요소 선택
[disabled] {
color: red;
}=> 특이한 속성을 선택할 때는 괜찮지만 자주 쓰이는 속성에 사용하는 것은 권장하지 않음
[ABC="XYZ"]
속성 ABC를 포함하고 값이 XYZ인 요소 선택
[type="password"] {
color: red;
}
안녕하세요 이동주입니다