1. type selector
p {
color: tomato;
}
html {
margin: 0;
}html 문서 내에 적용시킬 태그를 직접 지정하는 방식
2. class selector
html요소에 class를 부여하여 css 에서 .클래스이름 방식으로 속성을 부여하는 방식이며 class를 다중으로 부여하여 여러개를 동시에 속성을 부여할 수 있다.
<div class="box-0 box-1 box-2"></div> -1-
.box-0.box-1 {
color: tomato;
}
-2-
.box-0 {
color: tomato;
}
.box-2 {
margin:0;
}-1-
.box-0.box-1처럼 두개의 class를 선택하여 속성을 부여할 수 있다 이 때 html에서는 한칸 띄워 분리해놓아 하고 class에서는 . 으로 분류하여야 한다.
-2-
.box-0과.box-2처럼 따로 분리하여 속성을 부여할 수 있다.
3. ID selector
html요소에 ID를 부여하여 css 에서 .ID 방식으로 속성을 부여하는 방식이며 ID는 고유하기 때문에 ID 단 한개만을 선택하여 속성 부여를 할 수 있다.
<div id="box"></div> #box {
color: tomato;
}id를 class에서 지정하려면
#id이름으로 표현할 수 있다.
📎 id 와 class 선택자 표현 방법
<div id="box" class="box-1"></div> #box.box-1 {
color: tomato;
}4. child(자식),descendant(자손) combinator
<section>
<h1>heading</h1>
<ul>
<li>
<h1>1.list in heading</h1>
<p>
안녕하세요
</p>
</li>
<li>
<h1>2.list in heading</h1>
<p>
반갑습니다.
</p>
</li>
</ul>
</section>-자식 선택자-
li > h1 {
color : black;
}
-자손 선택자-
section h1 {
color : red ;
}
- 자식 선택자 : 자식선택자는 부모요소 바로 아래 태그들이 자식요소이다.
parent > child- 자손 선택자 : 자손 결합자는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택한다.
5. sibiling(형제) combinators
<body>
<section>
<h1>heading</h1>
<ol>
<li>my name</li>
<li class="active">가나다라</li>
<li>마바사아</li>
<li>자차카타</li>
<li>파하이네</li>
</ol>
</section>
</body>.active {
font-weight: 900;
}
-일반 형제 선택자-
.active ~ li {
color: yellowgreen;
}
-인접 형제 선택자-
.active + li {
color: aquamarine;
}
- 일반 형제 선택자 : 선택한 클래스 요소 바로 뒤에 모든 요소들의 속성을 부여할 때 사용
- 인접 형제 선택자 : 선택한 클래스 요소 바로 뒤에 한개만의 요소 속성을 부여하고 싶을 때 사용
6. Pseudo-classes (가상 선택자)
<body>
<section>
<h1>heading</h1>
<ol>
<li>my name</li> --> first child
<li>가나다라</li>
<li>마바사아</li> --> nth(3) child
<li>자차카타</li>
<li>파하이네</li> --> last child
</ol>
</section>
</body>li:first-child {
color: turquoise;
}
li:nth-child(3) {
color: darkorchid;
}
li:last-child {
color: blue;
}
7.User Action Pseudo-classes (동적 가상 클래스 선택자)
<section>
<h1>동적 가상 선택자</h1>
<a href="#">동적이다</a>
<input type="email" placeholder="Enter your Email" />
</section>a:hover {
background-color: darkorchid;
}
a:active {
background-color: darkred;
}
input {
outline: none;
box-shadow: none;
}
input:focus {
border-color: darkturquoise;
}
input:active {
border-color: deeppink;
}
- element:hover - 마우스를 요소위에 올려놓았을 때 실행되는 선택자
- element:active - 마우스 버튼을 누르는 순간부터 떼는 순간 실행되는 선택자
- element:focus - 마우스가 해당 요소를 클릭하면 실행되는 선택자
8. 선택자 우선 순위
선택자에도 우선 순위가 있는데 1등은 ID , 2등은 class & pesudo class , 3등은 type 이다.
선택자를 조합했을 때 순위
#gnb.tab-nav- id , class 가 있기 때문에 1 + 2
header.main-header- type , class 가 있기 때문에 2 + 3
#gnb.tab-nav ul- id , class , type 이 있기 때문에 1+2+3
#gnb.tab-nav ul:last-child- id , class , type , pesudo class 있기 때문에 1+2+2+3
우선 순위를 깨는법
<p style= color:red ;>: inline 방식으로 이 방식을 적용하면 선택자 상관없이 우선순위를 가져간다.*{color: hotpink !important; }: inline 방식이 있어도 무시하여 우선순위를 가져간다.
