-
선택자(selector) (2)프로그래밍/HTML&CSS 2022. 8. 27. 09:49728x90
6. 하위 선택자(자손)
조상 요소를 기준으로 그 하위의 요소 중 선택된 모든 요소의 스타일에 적용한다.
표기시에 조상 태그와 하위 태그를 사이 공란을 두어 표현하며 아래 코드에서 ul 태그 요소의 모든 하위 요소 중 모든 li 태그를 선택하여 li 태그의 글자 색을 red로 적용하는 예제 코드이다.
ul li { color: red;}[하위 선택자]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>하위 선택자</title> <style> ul a{color: deeppink; text-decoration: none;} /*text-decoration: none 하이퍼링크 밑줄 지움*/ </style> </head> <body> <h2>하위 선택자</h2> <ul> <a href="https://www.naver.com">네이버</a> <li><a href="https://www.google.com">구글</a></li> <li><p>다음</p></li> </ul> </body> </html>
하위 선택자 예제 결과 위 예제 결과에서 ul 태그 요소 하위 모든 a 태그 요소에 스타일이 적용된 것을 확인할 수 있다.
7. 자식 선택자
자식 선택자는 부모 요소를 기준으로 그 하위의 모든 자식 요소에 스타일을 적용한다. 이때 자식요소는 본인의 바로 밑에 존재하는 요소를 자식 요소라고 한다. 자손 요소가 아닌 자식 요소임으로 하위 선택자와 혼동을 조심해야한다.
표기시에 조상 태그와 자식 태그 사이 > 기호를 사용하여 표현하며, 아래 예제는 ul 태그 요소의 자식 요소 중 모든 li 태그를 선택하여 선택된 li 태그의 글자 색을 red로 적용한다.
ul > li {color: red;}[자식 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자식 선택자</title> <style> ul > a {color: deeppink; text-decoration: none;} </style> </head> <body> <h2>자식 선택자</h2> <ul> <a href="https://www.naver.com">네이버</a> <li><a href="https://www.google.com">구글</a></li> <li><p>다음</p></li> </ul> </body> </html>
자식 선택자 예제 결과 위 예제 결과를 보면 ul 태그 요소 하위 모든 자식 a 태그 요소에 스타일이 적용된 것을 확인할 수 있다.
8. 인접 형제 선택자
동일한 부모의 요소를 갖는 요소들의 관계로서, 형제 요소중에서 첫번째 동생 요소만 선택하는 것을 인접형제 선택자라고 하며, 요소와 요소 사이 +기호를 사용하여 표시한다.
아래 예제 코드는 a 태그의 형재 요소인 li 태그 중 맨 처음에 해당하는 li요소의 글자 색을 red로 적용한다.
a + li { color: red; }[인접 형제 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>인접 형제 선택자</title> <style> h3 + p {color: white; background-color: deeppink; font-size: 20px;} </style> </head> <body> <h2>인접 형제 선택자</h2> <div> <h3>첫째</h3> <p>둘째</p> <p>셋째</p> <p>넷째</p> <p>다섯째</p> </div> </body> </html>
인접 형제 선택자 예제 결과 결과를 보면 h3 요소의 모든 형제 p태그에 스타일이 적용된 것이 아닌 첫째 형제만 적용된 것을 확인할 수 있다.
9. 일반 형제 선택자
첫번째 형제 요소에만 적용되는 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. 일반 형제 선택자를 정의 할때는 요소와 요소 사이 ~ 기호를 사용하여 표시한다.
아래 예제 코드는 a 태그의 형재 요소인 모든 li 태그를 선택하여 모든 li요소의 글자 색을 red로 적용한다.
a ~ li{color: red;}[일반 형제 선택자]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>일반 형제 선택자</title> <style> h3 ~ p {color: white; background-color: deeppink; font-size: 20px;} </style> </head> <body> <h2>일반 형제 선택자</h2> <div> <h3>첫쨰</h3> <p>둘째</p> <p>셋째</p> <h4>넷째</h4> <p>다섯째</p> </div> </body> </html>
일반 형제 선택자 예제 결과 결과를 보면 인접 형제 선택자와 달리 h3 태그 요소의 형제 중 모든 p태그에 스타일이 적용된다.
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
글꼴 관련 스타일 (0) 2022.08.29 선택자(selector) (3) (0) 2022.08.28 선택자(selector) (1) (1) 2022.08.26 CSS 들어가기 (0) 2022.08.25 input 태그 (1) 2022.08.24