🎈요소, 클래스, ID 선택자 (Type, Class & ID Selector)

Type Selector

p {
	color: #212529;
}

blockquote {
	background-color: #e0e0e0;
}

HTML의 태그 자체를 직접적으로 지칭하는 거다. 요소 선택자라고 한다.

Class Selector

<div class="box">
	<!-- ... -->
</div>
<div class="box">
	<!-- ... -->
</div>
<div class="box">
	<!-- ... -->
</div>

단 한번을 스타일링 선언으로 여러 개의 요소를 동시에 스타일링 할 수 있어 굉장히 효율적으로 할 수 있다.

<div class="box-0 box-1 box-2">
	<!-- ... -->
</div>

.box-0.box-1
.box-0.box-2
.box-1.box-2
.box-0.box-1.box-2

한 요소에 여러 개를 동시에 선언할 수 있다. 공백없이 붙어 있으면 하나의 선택자가 되기 때문에 공백이 필요하다.

ID Seletor

<div id="leesaerom">
   <h1> Hello </h1>
</div>

#leesaerom {
	background: #0066ff;
}

단 하나만 선택해서 스타일링 할 수 있다.

🎈자식, 자손, 형제 선택자 (Child, Descendant & Sibling Combinators)

Child Combinator

<section>
        <h1>Selectors</h1>
        <ul>
            <li>
                <h1>Child Combinator</h1>
                <p>
                    Lorem, ipsum dolor.
                </p>
            </li>
            <li>
                <h1>Child Combinator</h1>
                <p>
                    Lorem, ipsum dolor.
                </p>
            </li>
        </ul>
</section>

section > h1 {
    color: #ff4949;
}

• parent > child : 부모 태그 안에 있는 자식을 선택한다.

<section>안에 <h1>과 <ul>로 구성 되어 있지만 CSS 파일에서 <section>안에 <h1>지정되어 있어서 Selectors에 빨강색으로 표현된다.

Descendant Combinator

<section>
        <h1>Selectors</h1>
        <ul>
            <li>
                <h1>Child Combinator</h1>
                <p>
                    Lorem, ipsum dolor.
                </p>
            </li>
            <li>
                <h1>Child Combinator</h1>
                <p>
                    Lorem, ipsum dolor.
                </p>
            </li>
        </ul>
</section>

section  h1 {
    color: #ff4949;
}

• parent descendant : 부모 태그 안에 있는 모든 자손을 선택한다.

<section>안에 모든 자손의 <h1>을 선택해서 빨강색으로 표현된다.

Sibling Combinator

<section>
        <h1>Sibling combinators</h1>
        <ol>
            <li>Do something</li>
            <li class="active">Do something else</li>
            <li>Create something</li>
            <li>Create somthing else</li>
            <li>Make something</li>
            <li>Make something else</li>
        </ol>
</section>

// parent + sibling
.active {
    font-weight: 700;
}

.active + li {
    color: #ff4949;
}

- parent + sibling : 부모 태그 다음 태그를 선택한다.

active 기준으로 다음인 <li> 선택해서 빨강색으로 표현한다.

.active {
    font-weight: 700;
}

// parent ~ sibling
.active ~ li {
    color: #0066ff;
}

• parent ~ sibling : 부모 태그 다음 모든 태그를 선택한다.

active 기준으로 다음에 오는 모든 <li> 선택해서 파랑색으로 표현한다.

🎈구조적 가상 클래스 선택자 (Structual Pseudo-classes)

<section>
        <h1>Structual Pseudo Class</h1>
        <ol>
            <li>Do something</li>
            <li>Do something else</li>
            <li>Create something</li>
            <li>Create somthing else</li>
            <li>Make something</li>
            <li>Make something else</li>
        </ol>
</section>

li:first-child {
    color: #0066ff;
}

li:last-child {
    color: #ffc82c;
}

li:nth-child(3) {
    color: #ff4949;
}

가상 클래스는 어떤 상태랑 어떤 조건을 만족할 때 사용할 수 있는 클래스이다.

• element:first-child : 태그 중에 첫번째 태그를 선택한다.
• element:last-child : 태그 중에 마지막 태그를 선택한다.
• element:nth-child(n) : 채그 중에 n번째 태그를 선택한다.

🎈동적 가상 클래스 선택자 (User Action Pseudo-classes)

<section>
        <h1>User Action Pseudo Class</h1>
        <a href="#">Youtube Channel</a>
        <input type="email" placeholder="Enter your email"/>
</section>

a:hover {
    background-color: #7e5bef;
}

a:active {
    background-color: #592dea;
}

input {
    outline: none;
    box-shadow: none;
}

input:focus {
    border-color: #1fb6ff;
}

input:active {
    border-color: #009eeb;
}

유저 의 액션에 따라서 반응하는 선택자이다.

• element:hover : 어떤 요소를 마우스를 갖다 냈을 때 상태를 표현한다.
• element:active : 어떤 요소를 마우스 클릭 하였을때 변한다.
• element:focus : input을 작성할 수 있는 상태가 되었음을 알려줄때 변한다.

focus와 active는 엄밀히 말하면 다른 상태이긴 하지만 focus는 active를 포함을 하는 아주 미묘한 관계이다.

• focus : 요소가 포커스 되었을 때 (active 상태도 포커스 상태의 일부)
• active : 요소를 마우스로 클릭하는 찰나의 순간

focus상태일 때의 스타일을 기본으로 깔고 active상태일 때 추가로 스타일을 추가해서 덮어준다.

🎈CSS 선택자 올림픽

p {
    color: blue;
}

p {
    color: hotpink;
}

CSS는 나중에 선언된 선택자의 스타일링이 이전의 선언된 선택자를 덮어버린다. 그 이유는 Cascading Style Sheet의 Cascading 때문이다.

CSS 선택자 우선순위

1. ID
2. Class, Pseudo-class
3. Type

<p id="text" class="a b c d e f g h i j k l m n o">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, ducimus?
</p>

#text {
    color: #0066ff;
}

.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o {
    color: #ff4949;
}

Rule Breakers (비추천)

Inline Style

<p id="text" class="a b c d e f g h i j k l m n o" style="color: #ffc82c;">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, ducimus?
</p>

#text {
    color: #0066ff;
}

.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o {
    color: #ff4949;
}

열심히 스타일을 하더라도 inline style은 강력해서 inline style이 우선순위다.

!important

<p id="text" class="a b c d e f g h i j k l m n o" style="color: #ffc82c;">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, ducimus?
</p>

#text {
    color: #0066ff;
}

.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o {
    color: #ff4949;
}

p {
    color: #ff4949 !important;
}

inline style보다 !important가 더 강력하다.

최종적으로 우선순위는

!important(비추천) > Inline Style(비추천) > ID > Class, Pseudo-class > Type