4) 후손 셀렉터
-
부모 태그 안에 있는 모든 하위 태그를 하위 요소 , 후손 요소라고 부름
-
부모 태그 안에 있는 모든 태그 중에 selector2 를 선택
ex)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
h1 {
color: black;
}
div span {
color: royalblue;
}
</style>
</head>
<body>
<div>
<h1>Donghyun Lim</h1>
<p>코딩을 하고있습니다. 개발자입니다.</p>
<p><span>좋은 컨텐츠와 서비스</span>매일 매일 열심히 하자!</p>
</div>
</body>
</html>
5) 자식 셀렉터 : > 로 표시
- 부모 태그 (selector1) 안에 있는 바로 다음 레벨의 태그 중에 selector2를 선택
selector1 > selector2
ex)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
h1 {
color: black;
}
div > p {
color: red;
}
</style>
</head>
<body>
<div>
<h1>DonghyunLim</h1>
<p>코딩을 하고있습니다 개발자입니다.</p>
<p><span>좋은 컨텐츠와 서비스</span>매일 매일 열심히 하자!</p>
</div>
</body>
</html>
6) 가상 클래스 종류
- link :방문하지 않은 링크가 적용된 요소(예 : a 태그로 링크가 적용된 요소가 한번도 클릭되지 않은 경우)
- visited : 방문한 링크가 적용된 요소 (예:a 태그로 링크가 적용된 요소가 한번이라도 클릭된 경우)
- hover : 특정 요소에 마우스가 올라간 상태
- active : 링크 요소를 클릭한 상태 (예: a 태그로 링크가 적용된 요소를 마우스로 클릭하고 있는 상태)
- focus : 특정 요소에 포커스가 있는 상태(예: input 박스 안에 꿈뻑꿈뻑 표시가 보이는 상태)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: gray;
}
input:focus {
color: brown;
}
</style>
</head>
<body>
<div>
<h1>Donghyun Lim</h1>
<a href="https:/typiano.co.kr/">코딩공부</a>
<form action="https:/typiano.co.kr/ffffff" method="get">
<input type="text" id="data" name="data" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
7) UI 요소 상태 셀렉터
- enabled: UI 셀렉터가 사용가능한 상태
- disalbed: UI 셀렉터가 사용 불가능한 상태
- checked : UI 셀렉터가 선택된 상태
- indeterminate : UI셀렉터가 선택되지 않은 상태 (체크박스나 라디오 버튼들이 선택되지 못한상태)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
/* indeterminate 한번도 선택이 되지 않는 상태 */
input[type="radio"]:indeterminate + span {
color: red;
}
input[type="radio"]:checked + span {
color: orange;
}
input[type="checkbox"]:enabled + span {
color: blue;
}
input[type="checkbox"]:disabled + span {
color: green;
}
</style>
</head>
<body>
<div>
<h1>Donghyun LIM</h1>
<a href="https:/typiano.co.kr/">코딩공부</a>
<form action="https:/typiano.co.kr/" method="get">
<input type="radio" value="item1" name="item" /><span>item1</span><br />
<input type="radio" value="item2" name="item" /><span>item2</span><br />
<input type="checkbox" value="check1" name="check" /><span>check1</span><br />
<input type="checkbox" value="check2" name="check" disabled /><span>check2</span
><br />
<input type="text" id="data" name="data" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
8) 구조 가상 클래스 셀렉터
- fitst-child: 부모의 첫번째 자식 요소 선택
- lat-child : 부모의 마지막 자식 요소 선택
- nth-child(n) : 부모의 첫번째 자식 요소부터 시작 해서 n번쨰 자식 요소 까지 선택
- nth-last-child(n) : 부모의 마지막 자식 요소부터 시작해서 n번째 자식 요소 까지 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
p:first-child {
color: red;
}
p:last-child {
color: blue;
}
p:nth-child(2) {
color: green;
}
p:nth-last-child(3) {
color: brown;
}
/* p:nth-child(2n-1) , p:nth-child(2n) 짝수 홀수 등으로 표현 가능 */
</style>
</head>
<body>
<div>
<h1>Donghyun Lim</h1>
<h2>스터디 코딩</h2>
<div>
<p>스터디 코딩 개발자입니다.</p>
<p><span>좋은 컨텐츠와 서비스</span>를 만드는 일에 집중하고 있습니다.</p>
<p>새로운 기술을 익힐 때는, 아주 쉬운 부분부터 집중해서 익숙해지도록!</p>
<p>세세한 부분은 신경도 쓰지 말도록!</p>
<p>매일 매일 열심히 하자!</p>
<p>매일 매일 열심히 하자!</p>
</div>
<div>
<h2>first-child/last-child가 여기는 왜 안될까요?</h2>
<p>스터디 코딩 개발자입니다.</p>
<p><span>좋은 컨텐츠와 서비스</span>를 만드는 일에 집중하고 있습니다.</p>
<p>새로운 기술을 익힐 때는, 아주 쉬운 부분부터 집중해서 익숙해지도록!</p>
<p>세세한 부분은 신경도 쓰지 말도록!</p>
<p>매일 매일 열심히 하자!</p>
<p>매일 매일 열심히 하자!</p>
<h2>first-child/last-child가 여기는 왜 안될까요?</h2>
</div>
</div>
</body>
</html>
9) 부정 셀렉터
- not(셀렉터) - 셀렉터에 해당하지 않는 모든 요소 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
h2:not(.dave) {
color: red;
}
</style>
</head>
<body>
<h2>donghyun Lim</h2>
<h2 class="dave">스터디 코딩</h2>
<!-- h2 첫번째만 색상이 변경된다 class 적용이된건 not 스타일이 안먹게 해주는 스타일 -->
<p>
세부적인 문법은 끝도 없지만, 크롤링 기술 역량도 기를겸 이번엔 끝까지 가보는 것이 의미가
있을 것 같습니다.
</p>
<p>
또한 CSS는 디자인입니다. 디자인은 매우 세부적인 부분까지 제어가 가능해야 하므로,
셀렉터를 세부적으로 익힐 필요가 있습니다.
</p>
</body>
</html>
구조 가상 클래스 셀렉터 와 부정 셀렉터는 정말 필요한 CSS 셀렉터 공부였던거 같다 . 매번 이름을 짓는데 고민하는 상황에서 편하게 div 를 넣고서 스타일 주기 편할꺼같다는 생각에 얼른 적용해보고싶다.
프론트엔드 공부중