CSS 선택자 : 기본, 복합, 가상 클래스, 가상 요소, 속성
기본 선택자
*: 전체 선택자 : 모든요소를 선택
태그이름 : 태그 선택자 : 태그 이름에 해당하는 요소 선택
.클래스이름 : 클래스 선택자 : HTML class 속성의 값에 해당하는 요소 선택
#id값 : 아이디 선택자 : HTML id 속성의 값에 해당하는 요소 선택
복합선택자
기본선택자1기본선택자2 : 일치 선택자 : 선택자1과 2를 동시에 만족하는 요소를 선택.
!!일치선택자를 사용할때 태그 선택자를 맨앞에 작성해야함!!
선택자1>선택자2 : 자식 선택자 : 선택자1의 자식 요소 선택자2를 선택, 한단계아래인 경우에만 해당!!!
선택자1 선택자2 : 하위(후손) 선택자 : 선택자1의 하위요소 선택자2를 선택 ‘띄어쓰기’가 선택자의 기호!!
자식 선택자보다 하위선택자를 더 많이 사용함!!
선택자1+선택자2 : 인접 형제 선택자 : 선택자1 다음의 형제 요소 선택자2요소 하나를 선택
선택자1~선택자2 : 일반 형제 선택자 : 선택자1의 다음 형제 요소 선택자2요소를 모두 선택
가상 클래스 선택자 : 어떤한 이벤트를 취했을 때 동작하는 선택자 혹은 특정한 요소를 선택하는 선택자.
선택자:hover : 선택자요소에 마우스 커서가 올라가 있는 동안 선택
선택자:active : 선택자요소에 마우스를 클릭하고 있는 동안 선택
선택자:focus : 선택자 요소에 포커스되면 선택
포커스가 될 수 있는 요소는 정해져있음 대표적으로 input요소. 포커스가 불가능한 요소에 tabindex=“-1” 속성을 추가해주면 포커스가 가능 해진다.
nth-child 선택자
선택자:first-child** : 선택자가 형제 요소 중 첫째라면 선택.
선택자:last-child : 선택자가 형제 요소 중 막내라면 선택.
선택자:nth-child(n) : 선택자가 형제 요소 중 (n)번째라면 선택.n=1,2,3,4….입력
선택자:nth-child(2n) : 선택자가 형제 요소 중 짝수번째 라면 선택. 0부터 대입
선택자:nth-child(2n+1) : 선택자가 형제 요소 중 홀수번째 라면 선택. 0부터 대입
선택자:nth-child(n+2) : 선택자가 형제 요소 중 2번째이상 이라면 선택. 0부터 대입 ,2,3,4,…..
선택자1:not(선택자2) : 부정선택자 : 선택자2가 아닌 선택자1요소를 선택
가상 요소 선택자
선택자1::before : 선택자1요소의 내부 앞에 내용을 삽입. 인라인 요소로 삽입**자주사용
<div class=“box”> //html body 작성내용
Content!
</div>.box::before{ // css작성 내용
content: “앞!”;
}출력내용
앞! Content!
선택자1::after : 선택자1요소의 내부 뒤에 내용을 삽입. 인라인 요소로 삽입**자주사용
.box::after{ // css작성 내용
content: “뒤!”;
}출력 내용
Content! 뒤!
속성 선택자
[ABC] : 속성 ABC를 포함한 요소(태그) 선택
[ABC=“XYZ”] : 속성 ABC를 포함하고 값이 XYZ인 요소(태그)를 선택
스타일 상속 : 글자/문자 관련 속성들만 상속이 된다. 모든 글자/문자 속성이 상속이 되는것은 아니다.
강제 상속 : 강제로 속성을 상속시키는 것. inherit을 사용.
선택자 우선순위(점수)
점수가 높은 순서로 적용, 점수가 같다면 마지막에 작성된 코드가 적용(선언순서)!!
ID선택자 100점
class선택자 10점
태그 선택자 1점
전체 선택자 0점
Body 상속x
!import속성 999999점
인라인 선언 1000점
가상 클래스선택자 10점
가상 요소(태그) 선택자 1점
:not 0점
:not(.box) 10점
