CSS

Css - 가상 클래스(Pseudo Class) 핵심

dd-frontend 2024. 5. 28. 21:03

입력 요소 <input> 가상 클래스

:checked

체크한 입력 요소을 선택
라디오버튼 체크박스 한정

:disabled

사용 불가 상태입 입력 요소를 선택

:enabled

사용 가능 상태인 입력 요소를 선택
disabled로 설정하지 않은 입력 요소는 모두 "enabled".

:focus

포커스가 위치한 입력 요소를 선택
마우스 클릭, 또는 탭 키로 활성화된 입력 요소 1개를 선택.

:in-range, :out-of-range

특정 범위 안의 값을 가진 입력 요소를 선택
입력 값의 범위를 가지는 입력 요소 한정으로 사용되며,
입력 요소 속성 "min", "max" 값으로 범위를 지정함.

ex> 다음 코드에서 range을 벗어나는 값을 입력시 border가 빨간색으로 변한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:in-range Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="age">Enter your age (18-65):</label>
        <input type="number" id="age" name="age" min="18" max="65">
    </form>
</body>
</html>
input:in-range {
    border: 5px solid green;
    background-color: #e0ffe0;
}

input:out-of-range {
    border: 5px solid red;
    background-color: #ffe0e0;
}

:invalid

비 정상 값을 가진 입력 요소를 선택.
타입이 지정된 입력 요소에 올바르지 않은 값이 들어간 경우 선택.

:valid

정상 값이 입력된 모든 입력 요소를 선택.

:optional

필수 항목 속성이 지정되지 않은 입력 요소 선택.

<input type="text" id="userId" value="" required>

:read-only

읽기 전용 속성이 적용된 입력 요소를 선택

:read-write

읽기 전용 속성이 적용되지 않은 입력 요소를 선택

:required

필수 항목 속성이 지정된 입력 요소를 선택.

하이퍼링크 가상 클래스

:active

<a> , <button> 요소에 사용하며, 마우스 왼쪽 버튼을 누를 때 링크가 활성화된 상태입니다.

:hover

마우스 호버 상태인 링크.

:link

방문하지 않은 링크.

:visited

방문한 링크.

⭐️⭐️⭐️ 요소(들) 선택 가상 클래스

:empty

자식 요소가 없는 요소를 선택.

:first-child

부모 요소의 첫 번째 자식 요소를 선택.

:first-of-type

부모 요소의 자식 요소들 중 특정 태그 타입의 첫 번째 요소를 선택.
클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째 요소를 선택.

:last-child

부모 요소의 마지막 자식 요소를 선택

:last-of-type

부모 요소의 자식 요소들 중 특정 태그 타입의 마지막 요소를 선택.
클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째(마지막 요소) 요소를 선택.

:not

선택한 요소들 중 괄호 안의 조건에 해당하는 것을 제외한 나머지 요소(들)을 선택.

:nth-child

서수로 n번째 오는 요소를 선택.
수식을 사용해 반복해서 요소(들)을 선택.

:nth-last-child

서수로 n번째 오는 요소를 끝에서부터 선택.
수식을 사용해 반복해서 요소(들)을 선택.

:nth-of-type

서수로 n번째 오는 특정 태그인 요소를 선택.
수식을 사용해 반복해서 요소(들)을 선택.

:nth-last-of-type

서수로 n번째 오는 특정 태그인 요소를 끝에서부터 선택.
수식을 사용해 반복해서 요소(들)을 선택.

:only-child

1개의 자식 요소만 가지고 있는 부모 요소의 자식 요소를 선택.
부모 요소의 자식 요소가 태그 종류에 관계없이 1개만 있어야함.

:only-of-type

자식 요소(들) 중 특정 태그가 1개만 있는 부모 요소의 자식 요소를 선택.
특정 태그 외에 다른 태그(들)이 있을 수 있음.

:root

문서 루트 요소를 선택.
ex. Button에 hover하면 root 요소들이 전체적으로 어두워지는 것을 확인할 수 있다.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>:root Selector Example with Hover</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
<h1>Using the :root Selector with Hover</h1>  
<p>This is an example of using the <code>:root</code> selector to define CSS variables.</p>  
<button id="hoverButton">Hover Over Me!</button>  
<script src="script.js"></script>  
</body>  

<script>  
    const root = document.documentElement;  
    const button = document.getElementById('hoverButton');  

    button.addEventListener('mouseenter', () => {  
        root.style.setProperty('--main-bg-color', getComputedStyle(root).getPropertyValue('--hover-bg-color'));  
    });  

    button.addEventListener('mouseleave', () => {  
        root.style.setProperty('--main-bg-color', '#f0f0f0');  
    });  

</script>  
</html>

:root {  
    --main-bg-color: #f0f0f0;  
    --hover-bg-color: #d0d0d0; /* Darker background for hover */  
}  

body {  
    background-color: var(--main-bg-color);  
    color: #333;  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
    transition: background-color 0.3s;  
}  

h1 {  
    color: #007bff;  
}  

button {  
    background-color: #007bff;  
    color: #fff;  
    padding: 10px 20px;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
}

태그 속성 가상 클래스

:lang

lang 속성에 지정된 언어 속성 값에 따라 요소를 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:lang and :target Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p lang="en">This is an English paragraph.</p>
    <p lang="es">Este es un párrafo en español.</p>
    <p lang="fr">Ceci est un paragraphe en français.</p>
</body>
</html>

/* 스타일 영어 문단 */
p:lang(en) {
    color: blue;
    font-style: italic;
}

/* 스타일 스페인어 문단 */
p:lang(es) {
    color: red;
    font-weight: bold;
}

/* 스타일 프랑스어 문단 */
p:lang(fr) {
    color: green;
    text-decoration: underline;
}

:target

선택자에 대한 설명
.section:target 가상 클래스는 현재 URL의 해시와 일치하는 섹션에만 스타일을 적용.
여기서는 배경색을 노란색으로 변경합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:target Pseudo-Class Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>CSS :target Pseudo-Class Example</h1>
<nav>
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
    </ul>
</nav>
<div id="section1" class="section">Section 1 Content</div>
<div id="section2" class="section">Section 2 Content</div>
</body>
</html>
.section {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ccc;
    background-color: dodgerblue;
    transition: background-color 0.3s;
}

.section:target {
    background-color: #ffeb3b;
}

출처: HTML&CSS 마스터북

'CSS' 카테고리의 다른 글

CSS 여백, 요소, 배경  (0) 2024.06.06
CSS 애니메이션_1  (0) 2024.06.03
Css 선택자 부분 선택자(Partial Selector) + 가상 클래스(Pseudo Class)  (0) 2024.05.28
Css선택자 - 가상 요소(Pseudo Element)로 사용하기  (0) 2024.05.28
Css선택자_속성 선택자 기초  (0) 2024.05.28

'CSS'의 다른글

  • 현재글Css - 가상 클래스(Pseudo Class) 핵심

관련글

티스토리툴바