CSS day3
| 하위선택자 | 요소선택자 | 인접형제선택자 | 일반형제선택자 |
선택자
6. 하위 선택자(자손)
조상 요소를 기준으로 그 하위의 모든 요소의 스타일에 적용이 가능하다.
ul li { color: red;}
/*조상 태그와 그 하위 태그 간 공란으로 비워두는 것으로 표현한다.*/
/*ul태그 요소의 모든 하위 요소 중 모든 li태그의 글자 색을 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 {color: red;}
/*조상 태그와 그 하위 태그 간 > 기호를 사용하여 표현한다.*/
/*ul태그 요소의 자식 요소 중 모든 li태그의 글자 색을 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 { color: red; }
/*a태그 요소의 형재 요소인 li 태그 중 맨 처음에 해당하는 li요소의 글자 색을 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{color: red;}
/**a태그 요소의 형재 요소인 모든 li 태그의 글자색을 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태그에 스타일이 적용되었다.