2. CSS_선택자

1. 기본 선택자

태그선택자

p { color: red; }   /* 모든 <p> 태그 */

 

클래스선택자

.notice { font-weight: bold; }   /* class="notice" */

 

아이디선택자

#header { background: gray; }    /* id="header" */

 

속성 선택자 

input[type="text"] { border: 1px solid blue; }
a[target="_blank"] { color: green; }

 

---

2. 계층 선택자

자식 선택자(>)

div > p { color: orange; }   /* div 바로 아래 자식 p */

 

자손 선택자(공백)

div p { color: pink; }   /* div 안에 있는 모든 p (손자, 증손자까지) */

 

형제 선택자

h1 + p { color: red; }     /* h1 바로 뒤에 오는 p */
h1 ~ p { color: blue; }    /* h1 뒤에 오는 모든 p */

 

---

3. 가상 클래스 선택자 (Pseudo-classes)

 

링크 관련 가상 클래스 선택자 👉 a 태그 전용 상태 선택자

• a:link : 방문하지 않은 링크
• a:visited : 방문한 링크

a:link {                /* 방문하지 않은 링크 */
    color: blue;
    text-decoration: none;
}
a:visited {             /* 방문한 링크 */
    color: purple;
}

 

동적 가상 클래스 선택자 (사용자 동작에 반응)

• :hover : 마우스를 올렸을 때
• :active : 클릭하는 순간
• :focus : 입력창 활성화 상태

a:hover {               /* 마우스를 올렸을 때 */
      background: yellow;
}
a:active {              /* 클릭하는 순간 */
      color: red;
}
input:focus {           /* 입력창 활성화 상태 */
      border: 2px solid green;
      background: #f0fff0;
}

 

구조적 (위치 기반) 가상 클래스 선택자 (위치 기반, Structural)

• :first-child : 첫 번째 자식
• :last-child : 마지막 자식
• :nth-child(n) : n번째 자식
• :nth-of-type(n) : 같은 태그 중 n번째
• :only-child : 형제가 없는 유일한 자식

 td:nth-child(2) {
    background: red; /* 각 행의 2번째 칸만 빨강 */
}
  
👉 실행하면 1행 2번째(1-2), 2행 2번째(2-2)만 빨갛게 칠해짐

---

4. 그룹 선택자

 

h1,h2,h3,h4{
	font-size:20px;
	font-family:궁서, "맑은 고딕";
	}