오늘은 부모 자식 선택자에 대해 포스팅하겠습니다.
부모 자식 관계는 포함하면 부모이고 포함되어지면 자식이라고 보시면 됩니다.

부모 자식 관계 예제

html을 사용해서 웹 사이트를 제작한다면 단순히 하나의 태그만 사용하는것이 아니라 태그안에 태그를 사용해야 합니다. 만약 위의 코드에 ul태그가 아닌 li태그를 포함하는 ol 태그가 하나 더 온다고 가정해봅시다. 나는 ul안에 있는 li 태그만 스타일을 다르게 하고 싶은데 style부분에서 li{}이런식으로 스타일을 지정해버리면 ul,ol 태그 안에 있는 li 태그가 다 바뀌게 됩니다. 그럴때 쓰는것이 바로 부모 자식 관계입니다. 사용법은 간단합니다. 먼저 부모태그를 적고 한칸 띄우고 자식태그를 적으면 됩니다.

이번엔 좀더 까다로운 사용법입니다.

보시는것처럼 저는 ol 태그 안에 ol 태그를 또 넣었습니다. 그런데 저는 첫번째 ol 태그안에 있는 li 태그만 스타일을 주고 싶은데 이전의 방법 ol li{} 이렇게 사용해버리면 결과가 똑같이 나오게됩니다.
이럴때는 태그에 id값을 주고 ">"을 사용해서 구분하면 됩니다.
#test는 id가 test라는 것이고 > 는 바로아래의 의미를 가진다고 생각하면 됩니다.
그렇게 되면 #test>li{}의 의미는 test 바로아래에 있는 li 태그에 스타일을 적용해라는 의미를 가지게 된답니다. ㅎㅎ