css 가상선택자

:hover

• 태그:hover{}
• 마우스 커서를 대면 작동하는 선택자

.box {
  weight: 100px;
  height: 100px;
  background: tomato;
  transition: 0.5s;
}
.box:hover {
  width: 200px;
}

:active

• 태그:active{}
• 마우스를 클릭시 작동되는 선택자

.box:active {
  width: 200px;
  backgound: red;
}

:focus

• 대화형 컨텐츠에서 사용가능 (input / img / tabindex)
• 태그:focus{}
• 마우스를 클릭시 바뀜
• 주로 input를 제어한다

input {
  width:100px;
  outline: none;
  border: 1px solid lightgray;
  padding: 5px 10px;
}

input:focus {
  border-color: red;
  width: 200px;
}

css에서 태그 뒤에 띄어쓰기 하면 후손 선택자 선택가능하다? (o/x)

• 가능하다. 태그적고 한칸띄우면 그 부모요소의 자식의 태그를 적으면 선택가능하다

.fruit li { } 

위와 같이 class에서 과일이라고 지정된 태그안에 li를 선택가능하다
또한 li 중에서 제일 첫번째 자식 or 마지막 자식 을 선택하고 싶으면

.fruit li:first-child  -> 	첫번째 대후손 선택가능
.fruit li:last-child -> 마지막 대후손 선택가능 

가상클래스 선택자 : Nth-child

• 부모태그 자식태그:nth-child(n) {}
• n은 1부터 시작한다
• n*2이런 연산자로도 가능하다

.fruit li:nth-child(2) {}

동일한 타입의 요소 선택 : Nth Of Type

• 부모태그:nth-of-type(n) {}

*HTML
<div class="fruit">
	<div>berry</div>
    <p>apple</p>
    <p>banana</p>
</div>

*CSS
.fruit p:nth-of-type(1) {}

::before , ::after -> css content:"" 짝궁

• ::before은 HTML 택스트(문자)앞에 css에서 추가 할 수 있다.
• ::after HTML택스트(문자)뒤에 css에서 추가 할 수 있다.
• 주의할점: 무조건 css의 선택자 안에 { content:""}는 함께 있어야한다
• 이미지 넣을 수 있다 content: url(주소)

**HTML**
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

**css**
ul li::before {
  content: "";
  width: 100px;
  height: 10px;
  backgound: red;
}

속성선택자 [attr]

• HTML에서 class로 따로 이름을 짓지 않고 속성을 바로 css 에서 선택할 수 있다.
• 주로 input type =""에서 많이 쓰인다
  예를 들면

#HTML
<input type="text" value ="hello">
<input type="password" value="123>
<input type="text" value ="watermelon is the best"
watermelon>

#CSS
[type="password] {
width:100px;
} -> 타입이 하나만 존재할때

[watermelon] {
background: red;
} -> 타입이 여러게 존재할때 속성을 value 뒤에 적어준다. 

상속(inherit)되는 속성들 (properties)

• 부모요소에서 css를 지정했을때 자식까지 영향을 미치는 것
• only 글자를 바꾸는 property 썻을때만 해당된다!!
  ex) font 에 관한 것
• font-size
• font-weight
• font-style ....
• color
• text-align
• text-indent
• text-decoration ..

CSS의 우선순위 전체>태그>클레스>아이디

-점수 계산 잘 해라!

1. !important
   모든 선언을 무시하고 가장 우선

2. 인라인 선언 방식

3. 아이디 #selector (100pt)

4. class selector (10pt)

5. tag =element (1px)

6. *(전체)

7. 상속 inherit