[CSS]CSS selector
1. CSS selector(추가 내용)
기존의 태그 선택자,클래스 선택자,ID 선택자를 제외하고
전체 선택자와 복합 선택자, 그룹 선택자, 가상 클래스 선택자, 가상 요소 선택자 등이 존재
1-1. 전체 선택자(Universal Selector)(*)
→모든 요소를 선택 가능
*{
color: blue;
}
1-2. 복합 선택자(Combinators)
1-2-1. 후손 결합자(Descendant Combinator)(공백 사용)
→특정 요소의 모든 후손 요소에 적용
<!--selects all <p> elements inside <div> elements-->
div p {
background-color: yellow;
}
1-2-2. 자식 결합자(Child Combinator)(>)
→ 모든 후손 요소가 아닌 직계 자식 요소만 선택(중간에 Wrapper 요소가 있으면 스타일 적용 X)
div > p {
background-color: yellow;
}
1-2-3.일반 형제 결합자(General Sibling combinator)(~)
→첫번째 요소의 뒤에 위치하며 같은 부모를 공유하는 모든 요소 선택
<style>
h3 ~ p {
text-indent: 1em;
}
</style>
<body>
<h3></h3>
<p>여기는 들여쓰기 가능</p>
<p>여기도 들여쓰기 가능</p>
</body>
1-2-4.인접 형제 결합자(Adjacent Sibling combinator)(+)
→첫번째 요소의 바로 뒤에 위치하며 같은 부모를 공유하는 두번째 요소만 선택
<style>
h3 + p {
text-indent: 1em;
}
</style>
<body>
<h3></h3>
<p>여기는 들여쓰기 가능</p>
<p>여기는 안된다.</p>
</body>
1-3. 그룹 선택자(,)
→여러 selector에 동일한 스타일을 적용
.whatIsBlockquote, span {
color: green;
}
1-4. 가상 클래스 선택자(Pseudo-Class)(:)
→선택자 뒤에 ':' 를 붙이면 특정 이벤트마다 적용할 스타일 설정 가능(가상 요소 선택자와 달리 특정 상태에 스타일을 적용할 때 사용)
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 호버링 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
.hover-box:hover{
background-color: orange;
}
.focus-input:focus{
background: red;
}
1-5. 가상 요소 선택자(Pseudo-Element)(::)
→선택자 뒤에 '::'를 붙이면 선택한 요소의 일부분에 스타일 설정 가능(가상 클래스 선택자와 달리 특정 부분에 스타일 적용할 때 사용)
| 선택자 | 설명 |
| ::before | 블록 요소 앞에 내용을 삽입 |
| ::after | 블록 요소 뒤에 내용을 삽입 |
| ::first-letter | 블록의 첫 번째 문자를 선택 |
| ::first-line | 블록의 첫 줄을 선택 |
| ::selection | 사용자가 드래그로 선택한 블록 전체, 또는 일부를 선택 |
<style>
.ex::first-letter{
font-size:2.5em;
color:red;
</style>
<p class="ex">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세
<style>
.ex2::first-line{
font-size:2.5em;
color:red;
</style>
<p class="ex2">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세
2. CSS Specificity(Selector의 우선순위)
우선순위는 쉽게 점수 계산(tag <<<<< class <<<< id <<<<<< inline css)
- inline styling: 1000점
- id: 100점
- class: 10점
- tag: 1점
<style>
Example{
font-size:30px;
}
Example.ex3{
font-size:100px;
}
</style>
<Example class="ex3">p and class ex3</Example>Example태그에 적용된 30px은 1점
1점(Exampe) + 10점(.ex3) = 11점 이기 때문에 해당 요소는 100px이 적용
[CSS] 상속
1. 상속(Inheritance)
스타일이 상속되어 자식에게도 같은 스타일이 적용
<style>
Example2{
color:red;
font-size:14px;
}
Example4{
color:blue;
font-size:10px;
}
</style>
<Example2>
<Example3>Example3는 Example2의 자식이므로 당연히 빨간색</Example3><br>
<Example4>Example3의 자식이지만 얘는 파란색</Example4>
</Example2>
→Example3 태그는 부모 Example2의 영향을 받아서 빨간색과 14px로 변경
But, 본인의 요소가 해당속성을 갖고 있다면 본인의 스타일 적용 like Example4
'프로그래밍 언어 > HTML&CSS(Programming Language X)' 카테고리의 다른 글
| [HTML&CSS Basic] 8. Semantic Web & Semantic Tag (1) | 2022.11.16 |
|---|---|
| [HTML&CSS Basic] 7. Image(img, background-image) (1) | 2022.11.15 |
| [HTML&CSS Basic] 5. Margin & padding / Border / box-sizing (2) | 2022.11.14 |
| [HTML&CSS Basic] 4. Font Style, Text Style (2) | 2022.11.14 |
| [HTML&CSS Basic] 3. Introduction to CSS (1) | 2022.11.14 |