css에는 다양한 선택자들이 있는데 다른건 "이런게 있구나" 하고 넘어가도 클래스 선택자 만큼은 꼭 기억하고 넘어가도록 하자.
선택자를 쓰는 이유?
css는 같은 요소에 여러 스타일이 겹치는 경우가 생기는데 이때 선택자로 우선순위를 부여하기 위함이다.
전체 선택자
* {
margin:0;
padding:0;
}html을 포함한 문서 내의 모든 요소를 선택한다.
타입(유형, 태그, 요소) 선택자
h1 {
font-weight:bold;
}
p{
font-size: 24px;
}특정 태그를 선택한다.
아이디 선택자
html 페이지 내의 유일한 id를 선택한다. 재사용성이 크게 떨어진다.
<header id="header">
...
</header>#header {
padding: 10px;
}클래스 선택자
.을 활용하여 클래스를 선택한다. 한 페이지에 여러 개가 존재할 수 있기에 재사용성이 높다.
<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>.fc-red {
color: red;
}특성(속성) 선택자
주어진 특성을 가진 모든 요소를 선택한다.
[]을 사용한다.
[type="button"]{
border:0;
cursor:pointer;
}
[class="btn"]{
color:#fff;
background: royalblue;
}그룹 선택자
,를 활용하여 여러 태그를 선택한다.
h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}h1, h2, h3, h4, h5, h6{ font-weight:bold;}복합 선택자
자손(하위) 선택자
section p {
border: 3px solid skyblue;
}section 안에 있는 모든 p요소를 선택한다.
자식 선택자
>를 활용하여 바로 아래에 있는(직계자손) 요소만 선택한다.
section > p{
color:royalblue;
}일반 형제 선택자
~로 구분하며 뒤에 나오는 형제만 선택한다.
section ~ p{
text-decoration:underline;
}인접 형제 선택자
+로 구분하며 바로 뒤의 인접한 형제만 선택한다.
section + p{
background:yellow;
}가상 클래스 선택자
선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 선택된다.
가상 클래스
:link: 방문하지 않은 링크:visited: 방문한 링크:hover: 마우스 커서를 올려 놓았을 때:active: 마우스로 클릭했을 때:focus: 포커스 되었을 때
구조적 가상 선택자
:first-child: 형제 요소 그룹 중 첫 번째 요소last-child: 형제 요소 그룹 중 마지막 요소nth-child: 형제 사이의 순서에 따라 요소를 선택
/* 2번째 li */
li:nth-child(2) {
color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
color: lime;
}
/* 2n+1번째 li. (n은 0부터 1씩 증가합니다)*/
li:nth-child(2n+1) {
color: lime;
}:not: 부정 선택자
가상 클래스 왜 쓸까?
미리 정의되어 있는 가상 클래스로 코드를 효과적으로 줄일 수 있다!
가상 요소 선택자
가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위함이라면, 가상 요소 선택자는 실제로 존재하지 않는 요소를 만든다.
특정 요소들의 앞, 뒤로 텍스트나 문자, bar가 들어간다면 각 요소들마다 코드를 작성하는 방식이 있지만 코드가 반복되는 단점이 있다. 이러한 중복을 제거하기 위해 사용한다.
선택자::가상요소 { property: value; }::first-line, ::first-letter, ::before, ::after 등이 있다.
::after: 해당 요소 뒤에 무언가 요소를 추가한다.::before: 해당 요소 앞에 무언가 요소를 추가한다.
.link-id::after {
content: '';
display: inline-block;
height: 12px;
width: 1px;
margin-left: 5px;
background-color: #767676;
vertical-align: -2px;
}link-id라는 요소 뒤에 바(|)를 추가하는 코드이다.
선택자 우선순위
1. 후자우선의 원칙
동일한 선택자에 동일한 속성이 사용된 경우 뒤에 적힌 속성을 따른다.
2. 구체성의 원칙
선택자에 가중치(점수)를 주어 우선 순위를 계산한다.
- inline-style : 1000점
- id 선택자(#) : 100점
- 클래스(.), 가상클래스(:), 속성선택자([]) : 10점
- type(tag), 가상 요소 선택자(::) : 1점
- 전체 선택자(*) : 0점
<div>
<p id="id" class="class">
1. 이 글자는 어떤 색일까요?
</p>
<p id="id" class="class" style="color:red">
2. 이 글자는 어떤 색일까요??
</p>
</div>div #id{
color:green;
}
p{
color:black;
}
#id{
color:blue;
}
.class{
color:yellow;
}정답은 초록, 빨강이다. 다음 예제를 한번 보자.
<body>
<main>
<section>
<article>
<div>
<ul class="ul">
<li>
<p>
<strong>
<span>
<a href="#" class="click">
1. 이 글자는 어떤 색일까요?
2. 배경색은 어떤 색일까요?
</a>
</span>
</strong>
</p>
</li>
</ul>
</div>
</article>
</section>
</main>
</body>/* 클래스 + 유형 선택자 */
.ul a {
color: yellow;
}
/* 클래스 선택자 */
.click {
color: green;
background: black;
}
/* 유형 선택자 */
html body main section article div ul li p strong span a {
background: purple;
color: blue;
}편의상 body부분만 가져왔다. 정답은 노랑, 검정인데 파랑, 보라가 점수가 더 높으니 파랑,보라가 아닌가? 라고 할수도 있다. 그렇지만 아무리 구체적으로 작성해도 신분의 차이(기본 점수의 차이)는 이길 수 없다.
3. 중요성의 원칙
!important라는 선언이 있는데 이는 모든 우선순위를 뒤로 하고 최우선으로 실행한다. 되도록이면 사용하지 않도록 하자.
참고사항
강사님이 CSS 선택자를 재미있게 공부할 수 있는 사이트를 공유해서 여기에 남겨본다.
https://flukeout.github.io/
완료.
