minstory
CSS selector 본문
CSS 선택자에는 여러 종류가 있다.
element
id
class
descendent
div li {color: red;}
adjacent 인접 선택자
input + button {color: pink;} -> input 바로 뒤에 있는 button만 글자 색을 pink로 바꿈
direct child 직계자손 선택자
한단계 아래 하위항목만 선택
div > li {color: red;}
attribute 속성 선택자
input[type="text"] {color: red;}
pseudo class 유사 클래스
a:hover {color: red;} 링크위에 커서 올리면 색 변함
pseudo element
p::first-letter {color:red;} 문단 안에서 첫번째 글자만 빨간색
::selection {background-color:yellow;} 어떤 글이라도 드래그 하면 노란색배경
*Specificity 우선순위
id > class > element
계산 참고 사이트) https://specificity.keegan.st/
Specificity Calculator
Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.
specificity.keegan.st
*10진법 계산은 아님. element 20개보다 class 1개가 우선순위 높음
예제
다음과 같은 HTML 마크업이 있습니다.
- <ul>
- <li class="nav-link">Home</li>
- </ul>
이 마크업의 CSS 스타일은 다음과 같습니다.
- li {
- color:orange;
- }
- .nav-link {
- color: magenta;
- }
- ul li {
- color: blue;
- }
그렇다면 <li>의 색상은 무엇일까요? ---> magenta
inline style & !important exception 은 최우선순위임.
*혼선을 줄 수 있기에 사용하지 않는 것을 권장함
!important exception
다른 스타일 무시하고 무조건 최우선순위로 스타일을 적용시킴
h1 {color: red !important;}
CSS Inheritance 상속
<body>
<h1>제목</h1>
<section>
blabalbalbalblabl
</section>
</body>body {color:red;} -> h1에 상속되어 h1도 빨간색으로 바뀜
*일부 element 들은 상속되지 않도록 설정되어있음. border는 아예 상속 불가
ex) form하위에 있는 button input
button {color: inherit;} -> 이렇게 바꾸면 form 스타일을 상속받음
'HTML & CSS' 카테고리의 다른 글
| CSS Units (0) | 2022.06.24 |
|---|---|
| CSS box model (0) | 2022.06.21 |
| CSS review (0) | 2022.06.15 |
| HTML review (0) | 2022.05.23 |
| HTML (0) | 2019.08.18 |