들어가기 전에
특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 합니다.
특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있습니다.
엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보겠습니다.
학습 목표
- 기본적인 Selector 문법을 이해한다.
핵심 개념
- CSS Selector
- id, class, tag selector
- nth-child
학습하기
3) CSS Selector
- CSS_selector
- 영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다.
CSS selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.
element에 style 지정을 위한 3가지 기본 선택자
- tag로 지정하기
<style>
span {
color : red;
}
</style>- id로 지정하기
<style>
#spantag {
color : red;
}
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>- class로 지정하기
<style>
.spanClass {
color : red
}
</style>
<body>
<span class="spanClass"> HELLO World! </span>
</body>
CSS Selector의 다양한 활용
- id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }- 요소 선택 (공백) : 자손요소
- 아래 모든 span태그에 red색상이 적용됨
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu span { color : red }- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
- 아래는 span tag 2만 red 색상이 적용됩니다.
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu > span { color : red }- n번째 자식요소를 선택합니다. (nth-child)
- 첫번째 단락에 red 색상이 적용됩니다.
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>#jisu > p:nth-child(2) { color : red }
생각해보기
- pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
참고 자료
- CSS Selectors Cheatsheet
https://gist.github.com
- CSS Selectors Cheatsheet. GitHub Gist: instantly share code, notes, and snippets.
- [참고링크] Specificity
http://developer.mozilla.org
comment
24.03.29.
●css selector
1. 자식 상속: 태그>태그>태그: 태그 아래, 태그아래 태그에 css 속성 적용
이렇게 태그 태그 태그 빈칸으로 분리해도된다.
2. 태그.class이름 : class이름인데 태그가 OO인 속성적용
.class이름 도 가능
3. 태그#id이름 : id이름인데 태그가 OO인것에 속성 적용
#id이름 도 가능
4. 태그, 태그, 태그 : 태그와 태그와 태그에 속성적용
●nth-child(n) 와 nth-of-type(n)의 차이
1. nth-child(n)는 태그이름에 관계없이 n번째 자식 선택
ex)
.css
#jisu> p:nth-of-type(2){color:red;}
.html
<div id="jisu">
<h2>단락선택</h2>
<p>첫번째 단락입니다</p> <-- 첫번째단락입니다.가 빨간색으로 바뀜
<p>두번째 단락입니다.</p>
<p>세번째 단락입니다.</p>
<p>네번째 단락입니다.</p>
</div>
2. nth-of-type(n)는 태그 이름에 해당하는 것들 중에 n번째 자식 선택
ex)
.css
#jisu> p:nth-of-type(2){color:red;}
.html
<div id="jisu">
<h2>단락선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다.</p> <-- 두번째단락입니다.가 빨간색으로 바뀜
<p>세번째 단락입니다.</p>
<p>네번째 단락입니다.</p>
</div>
22-08-15
nth-child 와 nth-of-type의 차이 : 유형과 관계없이 n번째를 선택, nth-of-type : 특정 유형부터 선택
2022.07.27
tag: span { color : red; }
id: #spantag { color : red; } <span id="spantag"> HELLO World! </span>
class: .spanClass { color : red; } <span class="spanClass"> HELLO World! </span>
1. nth-child(n) : 유형에 관계 없이 n 카운팅
nth-of-type(n) : 특정 유형부터 n 카운팅
'22.05.16
p:nth-child(k) : p태그의 부모태그에서 k번째 태그 선택
p:nth-of-type(k) : p태그의 부모태그에서 p태그의 k번째 태그 선택
2022.03.15
> 자식
공백 자식의 자식의 자식의 자식의....
nth-child -> 종적 들어가기
nth-of-type -> 횡적
#jisu > p:nth-child(2) { color : red } = id가 jisu인 태그의 자식 태그들 중에서 n번째 자식 태그가 p이면 색상을 red로 변경.
#jisu > p:nth-of-type(2) { color : red } = id가 jisu인 태그의 자식 태그들 중에서 n번째 p태그의 색상을 red로 변경.
실행결과 :
2022.2.4
nth-chid는 모든 자식 요소들 중 n번째 자식이 조건이 맞으면 적용되지만
nth-of-type은 자식 요소들 중 element가 일치하는 것들 중 n번째 것에 적용된다.
type 조건의 만족하는지의 차이. nth-child의 경우 부모 요소의 모든 자식 중 순서만 맞으면 됨. 반면 nth-of-type의 경우 부모 요소의 모든 자식 요소 중 ①type 조건을 만족하고 ②순서를 만족하는 대상을 선택
220109
202201016
tag
#id
.class
p:nth-child(2) 는 자식중에서 2번째가 p면 적용
nth-of-type은 그 타입 중에서 순서 정하는 것
21.08.13
210726
nth-child 는 모든 요소 포함해서 자식을 세고
nth-type-of 는 특정 type의 자식만 센다
21.05.09
21.5.3
nth-child 와 nth-of-type의 차이점
- p 태그가 들어가야 n번째 자식 요소를 선택 가능
- p:nth-child(n)은 전체 나열된 것에 n 번째, p:nth-of-type(n)은 p중 n 번째
21.04.25
n번째 자식요소 선택시
반드시 예를들면 h1 태그안에 p 태그가 들어가야됨
그냥 일렬로 h1태그 p태그 따로 나열하면 적용안됨.
test.html파일에서
<head>
<style>
.header > h1 > p:nth-child(4) { color : red }
</style>
</head>
<body>
<div class="header">
<h1>Header
<p>hola</p>
<p>hola</p>
<p>hola</p>
<p>hola</p>
</h1>
</div>
</body>