css 선택자, 기본 선택자, 복합 선택자, 가상 클래스, 가상 요소 ::before, ::after, 속성 선택자

css 선택자

- 기본, 복합, 가상 클래스, 가상 요소, 속성

- 선택자는 뒤에서부터 해석해주면 이해가 쉽다

 

1. 기본 선택자

• * 전체 선택자 : 모든 요소를 선택
• abc 태그 선택자 : 태그 이름이 abc인 요소 선택
• .abc 클래스 선택자 : html class 속성의 값이 abc인 요소 선택
• #abc 아이디 선택자 : html id 속성의 값이 abc인 요소 선택

기본 선택자는 해당 순서대로 기억하기! 

 

2. 복합 선택자

• abcxyz 일치 선택자 : 선택자 abc와 xyz를 동시에 만족하는 요소 선택
• abc > xyz 자식 선택자 : 선택자 abc의 자식 요소 xyz 선택
  ex) ul > .orange { }
• abc xyz 하위(후손) 선택자 : 선택자 abc의 하위 요소 xyz 선택, '띄어쓰기'가 선택자의 기호이다.
• abc + xyz 인접 형제 선택자 : 선택자 abc의 다음 형제 요소 xyz 하나를 선택, 같은 부모를 공유하는 요소
• abc ~ xyz 일반 형제 선택자 : 선택자 abc의 다음 형제 요소 xyz 모두를 선택

3. 가상 클래스 선택자(1)

어떠한 행동을 했을때 떠오르는 동작

• abc:hover : 선택자 abc 요소에 마우스 커서가 올라가 있는 동안 선택
• abc:active : 선택자 abc 요소에 마우스를 클릭하고 있는 동안 선택
• abc:focus : 선택자 abc 요소가 포커스 되면 선택
  focus가 가능한 요소에만 사용이 가능함
  focus가 될 수  있는 요소는 html 대화형 콘텐츠가 해당된다. input, a, button, label, select 등 여러 요소가 있고 html 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 focus가 될 수 있다.
  tabindex = "" : 속성을 통해 focus가 될 수 있는 요소를 만들 수 있다. 이름에서도 알 수 있듯이 tab키를 사용해 focus 할 수 있는 순서를 지정하는 속성으로 순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.
  https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories

3. 가상 클래스 선택자(2)

• abc:first-child : 선택자 abc가 형제 요소 중 첫째라면 선택
• abc:last-child : 선택자 abc가 형제 요소 중 막내라면 선택
• abc:nth-child(n) : 선택자 abc가 형제 요소 중 (n)째라면 선택
  .fruit *:nth-child(2n) 짝수 번째
  .fruit *:nth-child(2n+1) 홀수 번째
  .fruit *:nth-child(n+2) 2번째 요소부터.. 시작, 2번째 요소 이후 시작
  n은 0부터 시작한다! (zero-base numbering)
• abc:not(xyz) 부정 선택자 : 선택자 xyz가 아닌 abc 요소 선택

4. 가상 요소 선택자

• abc::before : 선택자 abc 요소의 내부 앞에 내용을 삽입
• abc::aftrer : 선택자 abc 요소의 내부 뒤에 내용을 삽입

.box::before {

content: "";

}

이렇게 content: ""; 를 비워두더라도 before와 after는 content를 사용해야 동작을 한다!

 

5. 속성 선택자

• [abc] : 속성 abc을 포함한 요소 선택
• [abc="xyz"] : 속성 abc을 포함하고 값이 xyz인 요소 선택