가상 Class 선택자 (Pseudo Class Selector)
가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다.
- 구조 가상 클래스
- :first-child 첫 번째 자식 요소
- :nth-child(n) 상위 요소의 n번째 자식 요소
- :last-last-child 마지막 자식 요소
<ul>
<li class="woon">1</li> <!--.woon:first-child-->
<li class="woon">1</li>
<li class="woon">1</li> <!--.woon:nth-child(3)-->
<li class="woon">1</li>
<li class="woon">1</li> <!--.woon:last-child-->
</ul> 💡 :nth-child(odd) or :nth-child(2n+1) 하면 엘리먼트 중 홀수 번째 자식인 엘리먼트가 선택됨.
💡 :nth-child(even) or :nth-shild(2n) 하면 엘리먼트 중 짝수 번째 자식인 엘리먼트가 선택됨.
- 동적 가상 클래스
- :link 방문 전의 하이퍼링크 요소
- :visited 방문 후의 하이퍼링크 요소
- :active 현재 페이지 사용자의 액션을 받는 요소
- :hover 마우스의 포인트가 올라간 요소
- :focus 키보드의 포커스를 받는 요소
<style>
input:focus{
color: red;
}
input:hover{
color: green;
}
input:active{
color: blue;
}
</style><body>
<form method="get">
<input type="text" id="id" name="id/>
<label for="id">ID</label>
</form>
</body>
💡 input에 키보드로 입력을 했을 때 빨간색으로 표시됨(focus)
💡 input에 마우스키를 가져다 댔을 때 초고색으로 변함(hover)
💡 input에 마우스로 클릭을 하고 있을 때 파란색으로 변함(active)
❗ 여기서 하나 알고 가야될 label요소!! label 태그는 뜻 그래도 이름표와 같은 역할을 한다.
for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 label 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다. 또한 label 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있다.
❗ label요소를 사용하는 가장 큰 이유는 웹 접근성을 위함이다. 즉, 스크린리더와 같은 통신기기는 label 태그를 이용해 연결된 input태그를 인식할 수 있다.
💁그래서 위에 코드를 보면, lable for 속성값과 input의 id의 속성값이 같기 때문에, ID라는 텍스트를 클릭하면 input에 마우스커서가 나타나서 입력 가능하다.
- UI 요소 상태 가상 클래스
- :checked 셀렉터가 체크된 상태일 때
- :enabled 셀렉터가 사용 가능한 상태일 때
- :disabled 셀렉터가 사용 불가능한 상태일 때
-
부정 가상 클래스
:not(n) n으로 지정된 선택자를 제외한 요소를 선택함
<style>
li:not(.one) {
color: red;
}
</style><body>
<ul>
<li class="one">안뇽</li>
<li class="one">안뇽</li>
<li class="two">안뇽</li>
<li class="one">안뇽</li>
</ul>
</body>
💡 .one이 아닌 클래스는 red컬러가 적용됨.
가상 요소 선택자 (Pseudo Element Selector)
가상 요소 선택자는 콜론이 2개(가상클래스 선택자는 1개), 간혹 가상요소 선택자에 콜론이 1개만 보이는 경우가 있는데, 이것은 레거시 브라우저 호환을 위한 선택이다.(Internet Explorer8이하)
가상 요소 선택자는 마크업 없는 요소를 삽입(가상클래스 선택자는 클래스 없는 요소에 클래스 삽입)
☝️ 가장 많이 사용하는 가상 요소는 선택자가 after와 before다.
::after 실제 내용 바로 뒤에서 생성되는 자식요소
::before 실제 내용 바로 앞에서 생성되는 자식요소
<style>
p::after{
content: "cm"
}
p::before{
content: "!!"
}
</style><body>
<p>10</p>
</body>!!10cm 라는 결과가 나옴
❗ after와 before를 쓸 땐 반드시 'content'라는 속성이 필요하다
content는 '가짜 속성'으로 HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주기 위해 사용한다.
