CSS 후손 선택자와 자식 선택자, 그리고 그룹 선택자

이전 포스트에 이어서 이번에도 선택자에 대해서 정리를 해보겠다.

이번에는 후손 선택자와 자식 선택자에 대해서 알아보자.

이전 포스트

CSS 기본 선택자의 종류 (태그, 아이디, 클래스)

CSS 선택자(Selector)의 가장 기본이 되는 태그, 클래스(.), 아이디(#) 선택자의 차이점과 사용 규칙을 정리했습니다. 한 페이지에 딱 한 번만 써야 하는 ID의 중요성과 스타일 충돌 시 승자를 결정하는 '우선순위' 규칙까지 확인해 보세요!

생활코딩 CSS 수업 영상: 부모 자식 선택자

영상에서는 '부모 자식 선택자'라는 말만 쓰고 '후손 선택자'나 '자식 선택자' 같은 복잡한 말은 쓰지 않았다.

이런 이름에 연연할 필요는 없다.

기억할 필요도 없다.

하지만 나는 여기에 글로 정리를 해야 하기 때문에 어쩔 수 없이 이런 헷갈리는 이름을 써서 정리를 해야겠다.

"도대체 후손은 뭐고, 자식은 뭐야?"라는 생각이 드는 이름이다.

'후손'과 '자식'이라는 단어가 비슷하기 때문에 더 그럴 것이다.

번역하기 나름이라 어떤 곳에서는 '자식 선택자'를 '자손 선택자'라고 쓴 곳도 있다.

'후손'과 '자손'.. 이건 더 비슷하게 느껴져서 더 헷갈린다.

일단 코드부터 먼저 살펴보자.

/* 후손 선택자 */
ul li {
    color: red;
}

/* 자식 선택자 */
#lecture > li {
    border: 1px solid red;
}

위의 생활코딩 영상에서 사용한 코드다.

• 후손 선택자 (공백): ul li (ul 안의 모든 li)
• 자식 선택자 (>): #lecture > li (id 속성 값으로 lecture를 가진 태그의 바로 아래의 li만)

간단히 정리하자면 이렇다.

아래에서 조금 더 자세히 설명해 보겠다.

후손 선택자: 우리 가문 식구 전부 다

후손 선택자의 기호는 '공백(스페이스 한 칸)'이다.

• 관계: 부모 아래에 포함되어 있다면, 그게 자식이든, 손자든, 증손자든 깊이에 상관없이 전부 선택한다.
• 비유: 할아버지가 "우리 가문 후손들은 전부 용돈을 주마"라고 하신 것과 같다. (자식, 손자 모두 받음)

자식 선택자: 내 직계 자식만

기호 >는 마치 화살표가 바로 아래를 가리키는 것과 같은 모습이다.

• 관계: 부모 바로 아래에 있는 직계 자식(1세대)만 선택한다.
• 비유: 부모님이 "내 자식들에게만 용돈을 주겠다"라고 선언한 것과 같다. (손자는 못 받음)

하지만 위의 생활코딩 CSS 수업 영상에서는 자식 선택자를 사용했음에도 불구하고, 손자 객체까지 color가 바뀐다.

이 부분은 나중에 CSS의 핵심 개념인 '상속'이라는 것을 배우면서 이해하게 될 내용이니 일단 넘어가자.

CSS Combinators

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

이전 포스트에서도 말했었지만, 선택자의 종류에 대해서 전부 정리하면 내용이 너무 방대해진다.

그래서 영상에서 알려주는 내용만 정리하려고 하는데, 영상에서 소개하지는 않았지만 관련된 선택자들이 정리된 페이지를 링크해 두겠다.

그룹 선택자

기호 ,(쉼표)를 사용해서 여러 선택자를 나열하는 방식을 그룹 선택자라고 부른다.

여러 개의 태그나 클래스, id에 똑같은 스타일을 한꺼번에 적용하고 싶을 때 사용하는 아주 효율적인 방법이다.

ul, ol {
    background-color: powderblue;
}

이렇게 서로 다른 선택자들에 동일한 CSS 속성을 부여하여 코드의 중복을 줄이고 유지보수를 편하게 만들기 위해 사용한다.

생활코딩 CSS 수업 영상: 선택자 공부팁

CSS Diner - Where we feast on CSS Selectors!

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

영상에서 소개한 CSS 선택자를 게임처럼 공부할 수 있는 사이트다.

게임의 정답들은 다음 포스트에서 올리도록 하겠다.

다음 포스트가 CSS 선택자 관련 마지막 포스트가 될 것 같다.

다음 포스트

CSS 가상 클래스 선택자

마우스를 올렸을 때, 클릭했을 때 등 요소의 '상태'에 따라 스타일을 주는 가상 클래스 선택자를 정리했습니다. 순서가 틀리면 작동하지 않는 아주 중요한 LVHA 규칙부터 웹 접근성을 위한 :focus의 중요성까지 확인해 보세요. 선택자 게임 정답 영상도 있습니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.