728x90
반응형
1. child 관련
- :first-child = 부모 태그(어떤 요소)의 첫번째 자식 태그에 해당하는 태그
- :last-child = 부모 태그(어떤 요소)의 마지막 자식 태그에 해당하는 태그
- :nth-child(n) = 부모 태그(어떤 요소)의 n번째에 해당하는 자식 태그
2. of-type 관련
- :first-of-type = 순서에 상관없이 첫번째에 해당하는 태그
- :last-of-type = 순서에 상관없이 마지막에 해당하는 태그
- :nth-of-type(n) = 순서에 상관없이 n번째에 해당하는 태그
<코드 예시>
<style>
/*
모든 p 태그에 스타일 설정
p{
background-color: yellow;
border: 1px solid red;
} */
/* 부모의 첫번째 자식 중 p 태그인 것 / body 태그의 첫 번째 자식은 h3이라 설정이 먹히지 않음 */
/* div 태그로 묶으면 div 태그 안에서 p 태그가 첫 번째 자식이 되기 때문에 설정이 먹힌다. */
p:first-child{
background-color: yellow;
border: 1px solid red;
}
/* 순서 상관없이 처음으로 만나는 p 태그를 의미함 */
p:first-of-type{
background-color: yellow;
border: 1px solid red;
}
/* 현재 상황에서 아래 설정은 동일하게 먹히지만 만약 마지막에 다른 태그가 있다면 p:last-child는 설정이 먹히지 않는다.*/
p:last-child, p:last-of-type{
background-color: yellow;
border: 1px solid red;
}
p:nth-child(7){
background-color: red;
}
</style>
<body>
<h3>:first-child, :last-child, nth-child(n) 정확한 의미?</h3>
<hr>
<h3>:first-child, :last-child 정확한 의미?</h3>
<h3>:first-child, :last-child 정확한 의미?</h3>
<h3>:first-child, :last-child 정확한 의미?</h3>
<!-- p*7>{$.}+lorem5 -->
<p>1.Lorem ipsum dolor sit amet. [자식 중에 첫번째는 아니지만 body에서 처음으로 만나는 p 태그]</p> <!-- body의 2번째 자식 -->
<p>2.Dolor natus eveniet maiores in? [body의 7번째 자식]</p>
<p>3.Error iure odio qui veritatis.</p>
<p>4.Unde harum enim expedita distinctio!</p>
<p>5.Exercitationem nesciunt ut quia repellat.</p>
<p>6.Sapiente voluptate atque voluptas perspiciatis.</p>
<p>7.Temporibus necessitatibus quisquam alias totam. [p:last-of-type]</p>
</body>
</html>
<적용 결과>
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_CSS_days04_툴팁 기능(풍선 도움말 구현) (0) | 2022.05.24 |
|---|---|
| [SIST] Web_CSS_days04_CSS 카운터 / 투명도 설정하는 속성(opacity, rgba) (0) | 2022.05.24 |
| [SIST] Web_CSS_days04_:의사 클래스(pseudo-class) 와 ::의사 요소(pseudo-element) (내용 추가중..) (0) | 2022.05.24 |
| [SIST] Web_CSS_days04_CSS 4가지 결합자 (0) | 2022.05.24 |
| [SIST] Web_CSS_days04_CSS float 속성과 clear 속성 (0) | 2022.05.24 |