<HTML+CSS3>하위선택자와 형제,그룹,자식 선택자들

하위 선택자-모든 하위 요서에 스타일 적용하기

-이 선택자는 적용 대상을 한정시키려고 할 때 사용하는 선택자입니다. 하위 선택자는 부모 요소에 포함된 모든 하위 요소에 스타일이 적용됩니다.

하위 선택자를 정의할 때는 상위 요소와 하위 유소를 나란히 쓰고, 그 다음에 오는 대괄호 안에 속성을 지정합니다.

ex)상위요소 하위요소 {속성 : 속성 값 ; ... }

다음 예는 <section>태그 안에 있는 모든 <p>태그의 글자색을 파란색으로 지정하는 것입니다.

ex) section p {color : blue; }

자식 선택자-자식 요소에만 스타일 적용하기

-자식 선택자는 자식 요소에 스타일을 적용하기 때문에 하위 선택자와 혼동하는 경우가 많다.

하위선택자 : 자식 요소뿐만 아니라 자식의 자식 요소, 즉 손자 요소에 까지 적용

자식선택자 : 바로 밑의 하위요소, 즉 자식 요소에만 스타일이 적용 

자식 선택자를 정의할 때 부모 요소와 자식 요소를 나란히 써주는데, 이때 두 요소 사이에 >(부등호)를 표시합니다

ex) 부모요소>자식요소{속성:속성값;...}

<section>태그안에 있는 <p>요소 중 자식 요소인 <p>의 글자색만 파란색으로 지정합니다

ex) section>p {color : blue;}

인접 형제 선택자-첫 번째 동생 요소에 스타일 적용하기

-문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에만 스타일이 적용된다.

같은 부부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이때 먼저 나오는 요소를 '형 요소' 나중에 나오는 요소를 '동생 요소'라고 합니다

인접 형제 선택자를 정의할 때는 요소1과 요소2 사이에 +(더하기 기호)를 표시합니다. 즉 요소1과 요소2는 같은 레벨이면서 요소1 다음에 가장 먼저 나타나는 요소2에 스타일을 적용합니다.

ex) 요소1 + 요소2 {속성 : 속성 값; ... }

다음 예는 <h1>태그 다음에 오는 <p>태그 중 첫 번째 <p>태그에만 밑줄을 그으라는 것입니다.

ex) h1+ p { text-decoration : underline ; }

그룹 선택자 - 스타일 한꺼번에 정의하기

-그룹선택자는 여러 선택자에 같은 속성을 적용해야 할 경우 똑같은 스타일을 두번 정의하지 않고 한번에 묶어서 정의할 수 있습니다.

이때 쉼표로 선택자를 구분합니다. 

ex) 요소1,요소2 .... {속성:속성 값;}

다음 예는 <a>태그를 사용하는 텍스트와 <p>태그를 사용하는 텍스트 양쪽의 글자색을 흰색 (#ffffff)으로 지정한 것입니다

ex) a,p {color : #fffff;}