CSS 선택자 다루기

CSS 문법은 크게 선택자와 선언부로 구성됩니다. 그중 선택자는 CSS를 적용할 태그(요소)를 지정하는 문법적인 영역인데, CSS는 선택자를 지정할 수 있는 다양한 방법을 제공합니다. 다양한 선택자 지정 방법을 익혀 둔다면 상황에 맞게 스타일을 지정할 태그를 선택할 수 있습니다.
CSS 기본 문법

선택자{ 속성 : 값; }

주석 : /* 주석 내용 */
단축키 : ctrl + /

기본 선택자

전체 선택자 (Universal Selector)

모든 요소에 스타일을 적용하는 선택자입니다. * 기호를 사용하여 정의합니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

태그 선택자 (Type Selector)

특정 HTML 태그에 스타일을 적용하는 선택자입니다. 태그 이름을 사용하여 정의합니다.

h1 {
    color: blue;
    font-size: 24px;
}

아이디 선택자 (ID Selector)

특정 ID를 가진 요소에 스타일을 적용하는 선택자입니다. # 기호를 사용하여 정의합니다.

#header {
    background-color: lightgray;
    padding: 20px;
}

클래스 선택자 (Class Selector)

특정 클래스를 가진 요소에 스타일을 적용하는 선택자입니다. . 기호를 사용하여 정의합니다.

.highlight {
    background-color: yellow;
    font-weight: bold;
}

기본 속성 선택자 (Attribute Selector)

특정 속성을 가진 요소에 스타일을 적용하는 선택자입니다. 속성을 대괄호 [ ]로 감싸서 정의합니다.

input[type="text"] {
    border: 1px solid gray;
    padding: 5px;
}

문자열 속성 선택자 (Substring Attribute Selector)

특정 속성 값의 부분 문자열을 포함하는 요소에 스타일을 적용하는 선택자입니다.

a[href^="https"] {
    color: green;
}

선택자 형식	설명	예제 코드
[attribute]	특정 속성이 존재하는 모든 요소를 선택합니다.	input[disabled]
[attribute="value"]	특정 속성이 지정된 값과 정확히 일치하는 요소를 선택합니다.	input[type="text"]
[attribute^="value"]	특정 속성이 지정된 값으로 시작하는 요소를 선택합니다.	a[href^="https"]
[attribute$="value"]	특정 속성이 지정된 값으로 끝나는 요소를 선택합니다.	img[src$=".jpg"]
[attribute*="value"]	특정 속성이 지정된 값을 포함하는 요소를 선택합니다.	a[href*="example"]
`[attribute	="value"]`	특정 속성이 지정된 값으로 시작하며, 그 뒤에 하이픈이 있는 요소를 선택합니다.

조합 선택자

아래에 CSS의 다양한 선택자 유형에 대한 정의와 예제 코드를 제공합니다. 각 선택자는 HTML 문서에서 요소를 선택하는 데 사용되며, 특정 조건에 따라 스타일을 적용할 수 있습니다.

그룹 선택자 (Group Selector)

그룹 선택자는 여러 개의 선택자를 콤마(,)로 구분하여 함께 묶어 스타일을 적용하는 선택자입니다. 이 방식은 동일한 스타일을 여러 요소에 동시에 적용할 때 유용합니다.

h1, h2, h3 {
    color: navy;
    font-family: Arial, sans-serif;
}

자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 직접적인 자식 요소를 선택하는 선택자입니다. > 기호를 사용하여 부모와 자식 관계를 정의합니다.

ul > li {
    list-style-type: square;
    color: green;
}

하위 선택자 (Descendant Selector)

하위 선택자는 특정 요소의 모든 자식 요소(직접적 또는 간접적)를 선택하는 선택자입니다. 공백을 사용하여 부모와 자식 관계를 정의합니다.

div p {
    margin: 10px;
    color: gray;
}

인접 형제 선택자 (Adjacent Sibling Selector)

인접 형제 선택자는 특정 요소 바로 다음에 오는 형제 요소를 선택하는 선택자입니다. + 기호를 사용하여 정의합니다. 두 요소는 동일한 부모를 가져야 하며, 선택된 요소는 바로 앞의 형제 요소에 인접해야 합니다.

h1 + p {
    font-style: italic;
}

일반 형제 선택자 (General Sibling Selector)

일반 형제 선택자는 특정 요소의 모든 형제 요소를 선택하는 선택자입니다. ~ 기호를 사용하여 정의합니다. 선택된 요소는 동일한 부모를 가져야 하며, 선택된 요소 뒤에 위치한 형제 요소를 선택합니다.

h2 ~ p {
    color: blue;
}

가상 선택자

가상 요소 선택자

가상 요소 선택자는 요소의 특정 부분에 스타일을 적용할 수 있게 해줍니다.

• ::before : 요소의 내용 앞에 콘텐츠 추가
• ::after : 요소의 내용 뒤에 콘텐츠 추가
• ::placeholder : placeholder에 스타일 적용

p::before {
    content: "Start: "; /* p 요소 앞에 추가 */
    font-weight: bold;
}

p::after {
    content: " - End"; /* p 요소 뒤에 추가 */
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

가상 클래스 선택자

가상 클래스 선택자는 특정 상태나 조건에 따라 요소에 스타일을 적용할 수 있게 해줍니다.

링크 가상 클래스 선택자

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

a:link {
    color: blue; /* 링크 */
}

a:visited {
    color: purple; /* 방문한 링크 */
}

동적 가상 클래스 선택자

• :hover : 마우스를 올렸을 때 (hover는 모바일에서 동작 안함)
• :active : 클릭하는 동안

button:hover {
    background-color: lightblue; /* 마우스 오버 시 */
}

button:active {
    background-color: blue; /* 클릭 중 */
}

입력 요소 가상 클래스 선택자

• :focus : 요소가 포커스를 받을 때
• :checked : 체크박스나 라디오 버튼이 선택된 경우
• :disabled : 비활성화된 입력 요소
• :enabled : 활성화된 입력 요소
• :required : 필수 입력 요소

input:focus {
    border: 2px solid green; /* 포커스 시 */
    
input:checked {
    accent-color: red; /* 체크된 체크박스 */
}

input:disabled {
    background-color: lightgray; /* 비활성화된 입력 */
}

input:required {
    border: 2px solid red; /* 필수 입력 */
}

구조적 가상 클래스 선택자

• E:first-child: E 요소중 첫 번째 자식 요소 선택
• E:last-child: E 요소중 마지막 자식 요소 선택
• E:nth-child(n): E 요소가 부모 요소의 자식 요소 중 n 번쨰 순서가 맞으면 선택
• E:nth-of-type(n): E 요소의 n 번째 요소 선택
• E:nth-last-child(n): E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택
• E:nth-last-of-type(n): 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소 선택
• E:first-of-type(n): 부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소 선택
• E:last-of-type(n): 부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소 선택

li:first-child {
    font-weight: bold; /* 첫 번째 리스트 항목 */
}

li:last-child {
    color: green; /* 마지막 리스트 항목 */
}

li:nth-child(2) {
    color: red; /* 두 번째 리스트 항목 */
}

p:nth-of-type(odd) {
    background-color: lightyellow; /* 홀수 번째 p 요소 */
}

last-child 를 사용할 때 주의할 점
live server 를 구동하면 웹 브라우저의 입장에서는 script가 마지막 자식이기 때문에 주의해야합니다.