클래스는
.
, 아이디는#
스페이스는 하위 요소에서 모두 조건에 맞는 요소를 찾는 것
붙어있으면 같은 요소에서 모든 조건에 맞는 요소를 찾는 것
<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;
}
inherit
자동으로 상속되는 글자와 관련된 속성 이외 상속을 하고 싶다면 자식의 속성으로 height: inherit;
으로 작성해주면 부모의 속성을 상속.
<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; }