CSS의 선택자

CSS의 공백 선택자

클래스는 . , 아이디는 #

스페이스는 하위 요소에서 모두 조건에 맞는 요소를 찾는 것

붙어있으면 같은 요소에서 모든 조건에 맞는 요소를 찾는 것

<div class="parent">
	<ul class="ul_class">
		<li class="item_class no1">
			<span class="span_class">li 1</span>
		</li>
		<li class="item_class no2">
			<span class="span_class">li 2</span>
		</li>
		<li class="item_class no3">
			<span class="span_class">li 3</span>
		</li>
	</ul>
</div>

• li 1 를 크롤링하고 싶으면 ?

  .item_class .no2>.span_class = item_class의 하위 요소중에서 no2라는 클래스를 가진 요소는 없다. item_class의 하위 요소들의 이름은 전부 span_class이다.

  .item_class.no2>.spanclass = item_class이 3개 있는 상황에서 같은 요소에 no2을 클래스로 갖는 요소는 하나다. 그 li의 하위클래스가 item_class가 존재한다.

<div class="test1 test2">
	<div class="test3">
		<p class="test4"></p>
	</div>
</div>

• test1 .test4는 <p class="test4">가 선택

• test1.test2는 <div class="test1 test2">가 선택

가상 클래스 선택자

어떤 행동을 했을 때 동작하는 개념

:hover

선택자 요소에 마우스 커서가 올라가 있는 동안 선택.

transition이랑 함께 사용되어 자연스러운 변화를 줄 수 있음.

:active

선택자 요소에 마우스를 클릭하고 있는 동안 선택

:focus

선택자 요소가 포커스되면 선택

포커스가 될 수 있는 요소는 대표적으로 input와 같이 사용자에게 데이터를 입력받는 요소

포커스가 가능하지 않는 요소에도 가능하게 하는 방법은 <div tabinex="-1"> tabindex 속성을 -1로 설정하여 추가해주면 됨. 이때 포커스가 될 수 있는 것은 페이지당 하나의 요소만 가능함.

:first-child

선택자가 형제 요소 중 첫째라면 선택

:last-child

선택자가 형제 요소 중 막내라면 선택

:nth-child(n)

선택자 형제 요소 중 (n)번째라면 선택

ABC:not(XYZ)

선택자 XYZ가 아닌 ABC 요소 선택

가상 요소 선택자

인라인(글자) 요소.

content 속성을 세트로 꼭 명시해야함.

ABC::before

선택자 ABC요소의 내부 앞에 내용(content)을 삽입

.box::before {
    content: "앞!"; 
}

ABC::after

선택자 ABC요소의 내부 뒤에 내용(content)을 삽입

.box::after {
    content: "뒤!"; 
}

속성 선택자

[ABC]

속성 ABC을 포함한 요소 성택

[ABC='XYZ']

속성 ABC를 포함하고 값이 XYZ인 요소 선택

[type="password"] {
	color: red;
}

CSS 의 상속

강제 상속

inherit

자동으로 상속되는 글자와 관련된 속성 이외 상속을 하고 싶다면 자식의 속성으로 height: inherit;으로 작성해주면 부모의 속성을 상속.

CSS 선택자 우선순위

<div
     id="color_yellow"
     class="color_green"
     style="color : orange;">
    Hello world!
</div>

div 			{ color: red !important; }
#color_yellow 	{ color: yellow; }
.color_green 	{ color: green; }
div 			{ color: blue; }
* 				{ color: darkblue; }
body 			{ color: violet; }

1. 인라인 선언 : 1000점
2. !important : 999999999999점
3. ID 선택자 : 100점
4. Class 선택자 : 10점
5. 태그 선택자 : 1점
6. 전체 선택자 : 0점
7. 상속 - X