css 기본 문법2(여러가지 선택자)

들어가기 앞서,

• CSS 기본 문법1에 이어 기본적인 문법 선택자들에 대해서 다루어보겠다. 

CSS 선택자

• *: 모든 요소를 선택

*

• ABC: 태그 이름이 ABC인 요소 선택

ABC

• .ABC: HTML class 속성의 값이  ABC인 요소 선택

.ABC

• #ABC: HTML id 속성의 값이 ABC인 요소 선택

#ABC

• ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

ABCXYZ

• ABC>XYZ: 선택자 ABC의 자식 요소 XYZ 선택

ABC>XYZ

• ABC XYZ: 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기'가 선택자의 기호이다.)

ABC XYZ

• ABC+XYZ: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

ABC+XYZ

• ABC~XYZ: 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

ABC~XYZ

• ABC:hover: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

ABC:hover

• ABC:focus: 선택자 ABC 요소가 포커스되면 선택

ABC:focus

• ABC:first-child: 선택자 ABC가 형제 요소 중 첫째라면 선택

ABC:first-child

• ABC:last-child: 선택자 ABC가 형제 요소 중 막내라면 선택

ABC:last-child

• ABC:nth-child(n): 선택자 ABC가 형제 요소 중 (n)째라면 선택(n에 2n을 넣어 짝수번째만 선택 등 여러가지로 활용가능)

ABC:nth-child(n)

• ABC:not(XYZ): 선택자 XYZ가 아닌 ABC 요소 선택

ABC:not(XYZ)

• ABC::before: 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입

ABC::before

• ABC::after: 선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입

ABC::after

• [ABC]: 속성 ABC을 포함한 요소 선택

[ABC]

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

[ABC="XYZ"]