선택자 응용
☆ 특정 요소 내부의 요소 : 상위요소 하위요소{property:value}. 단순히 한 칸 띄워서 작성한다.
★ 특정 id를 가지는 특정한 요소 : 요소#id{property:value}.
<div class="table">
<bento>
<orange />
</bento>
<plate id="fancy">
<pickle />
</plate>
<plate>
<pickle />
</plate>
</div>
위 문서에서 단순히 #fancy로 <plate id="fancy">를 선택할 수 있지만 #fancy를 가지는 다른 요소가 있는 경우 <plate id="fancy">만을 선택하고 싶다면 plate#fancy를 사용한다.
☆ 특정 class를 가지는 특정한 요소 : 요소.id{property:value}. 특정 id를 가지는 경우와 유사.
★ 특정 요소 내부에 있으며, 특정 class를 지니는 경우 : 상위요소 하위요소.class{property:value}.
<div class="table">
<bento>
<orange />
</bento>
<orange class="small" />
<bento>
<orange class="small" />
</bento>
<bento>
<apple class="small" />
</bento>
<bento>
<orange class="small" />
</bento>
</div>
bento 내부에 있는 orange.small에 css를 적용하기 위해서는
bento orange.small{property:value} 를 입력한다
☆ 두 개 이상의 요소를 선택할 경우 : 요소1, 요소2{property:value}.
★ 특정 요소 내부의 모든 요소를 선택할 경우 : 요소 *{property:value}.
☆ 특정 요소 다음에 위치한 하나의 요소를 선택할 경우 : 요소1+{property:value} 또는 요소1+요소2{property:value}. 이때 요소1 요소2 요소2 순서로 배치되어 있을 경우 요소 1 바로 다음의 요소2만 선택된다.
ex) <apple> <banana> <banana> 순서로 작성된 html 문서에 대해 apple+banana 는 가운데 위치한 <banana>를 지칭한다.
★ 특정 요소 다음에 인접한 요소들을 선택할 경우 : 요소1~{property:value}의 경우 요소1 다음에 오는 모든 요소들을 선택. 요소1~요소2{property:value}의 경우 요소1 다음에 오는 인접한 요소2들을 모두 선택한다.
ex) <apple> <banana> <banana> <cat> 순서로 작성된 html 문서에 대해 apple~은 <banana> <banana> <cat>를, apple~banana 는 가운데 위치한 <banana> <banana>를 지칭한다.
☆ 특정 요소 바로 하위에 위치한 요소를 선택할 경우 : 요소1>요소2{property:value}
<div class="table">
<plate>
<bento>
<apple />
</bento>
</plate>
<plate>
<apple />
</plate>
<apple class="small" />
</div>
plate>apple은 두번째 plate 내에 있는 apple만을 지칭한다.
또한 중첩으로 plate>bento>apple 과 같이 사용할 수도 있다.
★ 하위 요소 중 첫 번째 요소를 선택할 경우 : 하위요소:first-child{property:value}.
위 예제에서 apple:first-child은 모든 apple을 지칭한다.
bento apple:first-child는 bento 내부의 apple을 지칭한다. (내부 요소 선택하는 경우와 혼합된 경우)
☆ 특정 요소를 제외할 경우 : 요소:not(제외할 요소){property:value}. 제외할 요소가 클래스일 경우 .class를, 아이디일 경우 #id를 사용.
★ n번째 하위 요소를 선택할 경우 : 선택할 하위요소:nth-child(k){property:value} k번째 하위요소를 선택한다. 특정 상위 요소 내에서 n번째 하위요소를 찾으려면 상위요소 하위요소:nth-child(k)를 입력한다.
☆ nth-last-child(k) : nth-child와 유사하게 작동하지만 뒤에서부터 센다.
★ 특정한 요소 중 첫 번째를 선택할 경우 : 특정 요소:first-of-type{property:value}.
<div class="table">
<plate>
<bento>
<apple />
</bento>
</plate>
<plate>
<apple />
</plate>
<apple class="small" />
</div>
apple:first-of-type 은 네 번째 줄에 위치한 apple을 지칭한다.
☆ 특정한 요소 중 n번째를 선택할 경우 : 특정요소:nth-of-type(k){property:value}.
이때 k안에는 자연수가 들어갈 수도 있고 even, odd, an+b(등차수열)이 들어갈 수도 있다. even의 경우 짝수 번째 요소를, odd의 경우 홀수 번째 요소를 선택한다. 3n+1의 경우 1, 4,7,10, . . . 번째 요소를 선택한다. an+b 등차수열 형식은 n=0부터 시작한다!
★ 특정한 요소 중 마지막(맨 끝)을 선택할 경우 : 특정요소:last-of-type{property:value}.
☆ 비어있는(빈) 요소를 선택할 경우 : 특정요소:empty{property:value}.
위 예제에서 :empty는 비어있는 요소에 해당되는 apple, apple.small이 선택된다.
apple:empty를 선택할 경우에도 동일.
★ 특정한 속성이 적용된 요소를 선택할 경우 : [속성]{property:value}. [attribute="value"]는 특정 value값이 적용된 속성을 가지는 요소들을 지칭하지만 단순히 속성의 이름만 대괄호 안에 입력할 경우 그 속성을 가진 모든 요소가 적용된다.
특정요소[속성]을 적용하면 속성을 가지는 특정 요소를 지칭한다.
<div class="table">
<bento>
<apple class="small" />
</bento>
<apple for="Ethan" />
<plate for="Alice">
<pickle />
</plate>
<bento for="Clara">
<orange />
</bento>
<pickle />
</div>
[for]는 5,6,9 번째 줄에 있는 요소들을 지칭하고 [for="Ethan"]은 5번째 줄에 있는 요소를 지칭한다.
plate[for]는 6번째 줄에 있는 요소를 지칭한다.
☆ 특정 단어가 포함된 속성값을 가지는 요소 : [attribute*="value"]{property}.
★ 특정 단어로 시작하는 속성값을 가지는 요소 : [attribute^="value"]{property}.
☆ 특정 단어로 끝나는 속성값을 가지는 요소 : [attribute$="value"]{property}.
'개발 > 웹개발' 카테고리의 다른 글
| [HTML] HTML 데이터 입력받기 / 버튼, 체크박스 생성하기 : <form>, <input> (0) | 2022.09.06 |
|---|---|
| [CSS] 선택자란?, 선택자가 적용되는 우선순위(Selectors) (0) | 2022.09.03 |
| [CSS] CSS란?, CSS3를 HTML5에 적용하기 (0) | 2022.08.31 |
| [HTML] 항목, 리스트 만들기 : <ul>, <li>, <ol> (0) | 2022.08.28 |
| [HTML] HTML 기본구조, 기본태그 (0) | 2022.08.26 |