가상 클래스 (추상 클래스, 의사 클래스, Pseudo-class)

가상 클래스 (추상 클래스, 의사 클래스)

선택자 뒤에 추가하는 키워드로, :가상이벤트를 붙여서 특정 상태를 만족 할 때 스타일을 적용할 수 있다.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

다양한 키워드 예시들을 확인할 수 있다.

 

 

 

:link : 하이퍼링크가 걸려 있을 때 (방문한 적이 없는 링크)

:visited : 방문한 적이 있는 링크

:hover : 마우스를 올렸을 때

:active : 마우스를 클릭했을 때

:focus : 포커스 / 선택된 상태가 되었을 때

:disabled : disabled 적용된 태그 - 비활성화 된 상태

:read-only : read-only 속성 적용된 태그 - 읽기전용일때 (disable에도 적용된다.)

:required : required 적용된 태그 - 반드시 입력되어야 하는 태그

:checked : 체크박스or라디오버튼가 체크된 상태

:first : 첫번째 요소

:last : 마지막 요소

:first-child : 첫번째 자식 요소

:last-child : 마지막 자식 요소

:nth-child(m) : m번째 자식 요소 선택

:nth-last-child(m) : 끝에서부터 m번째 자식 요소 선택

:nth-child(2n) : 짝수번째 자식 요소 선택

:nth-child(2n+1) : 홀수번째 자식 요소 선택

 

 

  a:link{
            text-decoration: none;
            color:green;
        }

a태그중에 하이퍼링크가 걸려있는 태그에 스타일이 적용된다. 하이퍼링크가 걸리지 않은 a태그에는 적용되지 않는다.

 

 

    input:disabled{
            background-color:red !important;
        }
    input:read-only{
            background-color: green;
        }

disabled도 read-only가 적용되기 때문에 나중에 설정한 값이 적용된다. 나중에 설정한 값이 적용되지 않게 하기 위해서 속성값 뒤에 !important를 붙였다. disabled, read-only 따로 적용되게 하였다.

 

 

input:required:invalid{
background-color:yellow;
   }

input태그에 required 속성값이 적용 된것들 중에 값이 틀린(invalid) 태그에 적용되는 CSS이다. 반드시 입력되어야 하는 required 태그에 잘못된 입력은 "값이 입력되지 않은" 것이다.

 

 

        .container1>p:nth-child(3){
        color:green;
        }
        .container1>p:nth-child(2n){
        color:blue;
        }

container1태그의 자식요소 p에서 세번째, 짝수번째 요소들에 각각 CSS를 적용했다.

 

 

 

 

 

가상 요소 (의사 요소, pseudo-element)

의사 요소는 의사 클래스와 달리 요소의 특정 부분에 스타일을 적용할 때 사용한다. 선택한 요소의 일부분에만 스타일을 적용할 수 있다. 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드이다.

 

선택자::가상요소 {

속성: 속성 값;

}

 

 

::selection : 드래그했을 때 선택되는 요소에 사용 - 속성 : color, background-color, text-decoration, text-shadow

::placeholder : placeholder 태그에 적용

::after : 선택한 요소 마지막에 컨텐츠 추가 (content 속성으로 내용 추가)

::before : 선택한 요소 맨 앞에 컨텐츠 추가 (content 속성으로 내용 추가)

- after, before으로 추가한 내용은 드래그가 되지 않는다. 

::first-line : 웹 브라우저에 보이는 상태를 기준으로 요소의 첫줄 내용 선택

::first-letter : 웹 브라우저에 보이는 상태를 기준으로 요소의 첫 글자 선택

::marker : 목록 아이템 앞에 붙는 마커를 선택

 

.after li::after{
             content: "← 다음 줄로";
             color:cornflowerblue;
             text-decoration: underline;

after태그 선택자 자손 li태그의 마지막에 컨텐츠를 추가했다.