CSS - 선택자

 

선택자는 아주-우 중요하죠
내가 꾸미고 싶은 Tag에게 아주 멋지고 예쁜 style을 입혀줘야 하니까요! 

 

 

 1 CSS 선택자 

전체 선택자	요소 선택자	ID 선택자	Class 선택자
그룹 선택자	하위 선택자(자손)	자식 선택자	인접 형제 선택자
일반 형제 선택자	속성 선택자	순서에 따른 가상 클래스 선택자	가상 요소 선택자

 

 1_전체 선택자 : 스타일을 모든 요소에 적용
전체 선택자는 *기호를 사용 => *{ color: gray; }
=> 디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨

h2 { color: deepskyblue; font-weight: bold; } * { color: gray; }

---> 요소 선택자 ---> 전체 선택자

 

 2_요소 선택자 : 특정 요소가 쓰인 모든 요소에 스타일을 적용

<style> p {color: deeppink; }

모든 p태그에 color 적용

 

 3_id 선택자 

웹 문서 안의 특정 부분 스타일을 적용. #기호를 사용해서 id속성을 가진 요소에 스타일을 적용

<style> #hello { color: blue; } <h2 id="hello">안녕하세요</p> <p id="hello">안녕하세요</p>

hello id를 가진 태그에 스타일 적용 ** 같은 id를 가진 요소가 있다면, 먼저 쓰인 요소에 적용됨

 

 4_Class 선택자  : 특정 집단의 요소를 한번에 선택할 때 스타일을 적용,
(.)기호를 사용해 같은 클래스이름을 가진 요소에 스타일을 적용

<h2 class="hello"> 안녕하세요</h2> <p class="helllo">안녕하세요</p> <p class="helllo hi">안녕하세요</p> <p class="hi">하이</p>
<style> # .hello { color: red; }	class가 hello인 요소를 모두 빨간색으로 설정
<style> p.hello { color: red; }	p의 class가 hello인 요소를 모두 빨간색으로 설정
<style> .hi {border: 3px solid gold;}	class가 hi인 요소들의 테두리를 3px 골드색으로 설정

 

 5_그룹 선택자  : 여러 개의 요소를 나열하고 콤마(,)로 구분해 스타일을 적용
h2, p { text-align: center; }

 

 6_하위 선택자  : 조상 요소 하위의 모든 요소의 스타일을 적용(자손은 자식을 포함)

ul li { color: red; } /* ul 요소의 자식, 자손 li 요소를 빨간색으로 적용

 

 7_자식 선택자 : 부모의 요소 하위의 자식요소의 스타일을 적용

ul > li { color: red; } /* ul 요소의 자식 li 요소를 빨간색으로 적용

 

 11_순서에 따른 가상 클래스 선택자  : 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택

li:first-child	li요소 중에서 첫번째 해당하는 요소의 스타일을 적용 li:first-child { color: red; }
li:last-child	li요소 중에서 마지막 해당하는 요소의 스타일을 적용 li:last-child { color: red; }
li:nth-child(n)	li요소 중에서 (n)번째에 해당하는 요소의 스타일을 적용 li:nth-child(2) { color: red;}
li:nth-child(odd)	li요소 중에서 홀수 번째에 해당하는 요소의 스타일을 적용
li:nth-child(even)	li요소 중에서 짝수 번째에 해당하는 요소의 스타일을 적용