[html][css] 선택자 전부 다 / 기본선택자/ 복합 선택자 / 가상 클래스 선택자/ 가상요소 선택자/ 속성선택자

이 포스팅에 포함된 내용

1. 기본선택자

1-1. 전체 선택자

1-2. 태그 선택자

1-3. 클래스 선택자

1-4. id선택자

 

2. 복합선택자

2-1.일치 선택자

2-2. 자식선택자

2-3. 후손(하위) 선택자

2-4. 인접 형제 선택자

2-5. 일반 형제 선택자

 

3.가상클래스 선택자

3-1.hover

3-2.active

3-3.focus

3-4.first-child

3-5.last-child

3-6.nth-child

3-7.xxx-child

3-8.nth-of-type

3-9.not

 

4.가상요소 선택자

4-1. before

4-2. after

 

5. 속성선택자

5-1. [attr]

5-2. [attr=value]

5-3. [attr^=value]

5-4. [attr$=value]

 

---

기본선택자
1. 전체 선택자 :  *
2. 태그선택자 : 태그이름
3. 클래스 선택자 : .클래스명
4. id선택자 : #id이름

가장 많은 것은 태그, 클래스 선택자

---

 

복합선택자combinators

1.일치 선택자

e와 f를 동시에 만족하는 요소 선택 ef

ex) span.orange 태그.클래스

 

2. 자식선택자

e>f

e의 자식요소 f를 선택

ex) ul> .orange

 

3. 후손(하위) 선택자

e f 띄워쓰기

e의 후손 f

ex) div .orange

 

4. 인접 형제 선택자

e + f

부모 요소를 공유하는 형제 e의 다음 형제 요소 f

ex) .orange + li

다음에 인접해있는 형제를 찾는 것

orange라는 클래스를 가진 요소의 다음 형제인 li를 선택함

 

5. 일반 형제 선택자

e의 다음 형제 요소 f를 모두 선택

e~f

ex) .orange ~ li

li태그를 찾을 건데 orange클래스 주변에 있는 li태그 중에서 다음 태그 전부

 

---

가상 클래스 선택자
1.hover
e에 마우스 포인터가 올라가있는 동안
e:hover
ex) a:hover

2. active
e를 마우스로 클릭하는 동안에만 선택
e:active

3. focus
e가 포커스 된 동안에만 선택
e:focus
대화형 콘텐츠에서 사용가능
input img tabindex

선택자는 이벤트와는 관련이 없다.
////////////////////////////////////////

4. first child
e가 형제요소(같은 부모를 공유) 중 첫번째 요소라면 선택
e:first-child
ex) .fruits li:first-child
.fruits클래스 후손 중에 li중에서 첫번째 li

5. last child
마지막 요소
.fruits li:last-child
.fruits클래스 후손 중에 li중에 마지막 li

6. nth child
n번째 요소 
.fruits li:nth-child(2) (2번째 요소)
.fruits li:nth-child(2n) (짝수 요소)

7. xxx-child 주의사항
.fruits p:nth-child(1)

fruits안에 첫번째 자식 요소를 찾아라 그 요소가 p태그다
그런데 그게 아니면 선택이 안된다
오른쪽에서 왼쪽으로 해석을 해야한다

.fruits p:nth-child(1){
 	color: red;
}

<div class="fruits">
	<div>딸기</div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
 </div>
    

 

fruits안에 첫번째 자식 요소는 div이다.

 

8. nth-of-type, not

e의 타입, 태그이름과 동일한 타입인 형제요소 중 e가 n번째 요소라면 선택해라

n키워드 사용 시 0부터 해석

<div class="fruits">
	<div>딸기</div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
 </div>
    

.fruits p:nth-of-type(1){
	color:red;
}

이렇게 하면 fruits클래스 후손 중에 p태그 중에서 1번째 것을 선택한다. 

사과가 선택된다.

 

nth-of-type은 태그의 이름으로 선택이된다.

태그 찾는 개념으로만 사용한다.

 

 

9.부정 선택자

s가 아닌 e선택

<div class="fruits">
	<li>사과</li>
    <li class="strawberry">딸기</li>
    <li>망고</li>
    <li>오렌지</li>
 </div>
    

.fruits li:not(.strawberry){
	color:red;
}

fruits안에 li태그들은 다 color을 red로 바꿀 건데 .strawberry만 빼겠다

 

 

 

---

가상 요소 선택자

 

1. before

e요소 내부의 앞에, 내용을 삽입

e::before

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

ul li::before{
  content:"숫자";
  font-weight: bold;
}

html은 숫자만 있는데 한글로 숫자를 추가하는 코드이다.

content라는 속성이 매우 중요하다

없으면 아예 안나온다.

 

 

2. after

before과 다르게 뒤에 생성되는 것

ul{
  font-size:400px;
}
ul li::after{
  content:url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMDNfMjI0%2FMDAxNjEyMzMxNDgzMzYx.NxNZ5KpSBTOwgh8nD_vE1iAgF-oihKJTr893fKXSMs8g.hfzPpImrB88mGN6H466SDSR6VcZ_TFpE9tx6BT7hTCQg.JPEG.yelya%2Foutput_837763046.jpg&type=sc960_832);

}

 

---

속성선택자

 

1. [attr]

특정한 attr을 포함한 요소 선택

<input type="text" value="javachip">
<input type="password" value="2222">
<input type="text" value="disabled" disabled>

[disabled]{
 opacity: 0.2;
  color: red;
}

계속 이름을 부여하지 않아도 되는 장점이 있다.

 

2. [attr=value]

<input type="text" value="javachip">
<input type="password" value="2222">
<input type="text" value="disabled" disabled>

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

 

3. [attr^=value]

특정한 ~로 시작하는 속성

<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
<button>Normal</button>

[class^="btn-"]{
  color:red;
  font-weight:bold;
}

 

4. [attr$=value]

특정한 단어로 끝나는 속성

^=와 반대