| 문법 | 설명 |
|---|---|
| #id명 {} | ID를 지정시 샾(#)마크를 붙인다. 돔내 오직 하나 |
| .class명 {} | class 지정시 점(.)사용. 돔내 여러개 존재 |
| tag명 {} | HTML 태그를 사용 |
| 문법 | 설명 |
|---|---|
| * {} | 모든요소를 지정시 별표(*)를 사용 |
| 셀렉터 * {} | 특정 지정자 아래의 모든 요소는 지정자를 앞에 사용 |
| 문법 | 설명 |
|---|---|
| input[type=radio]:checked {} | 라디오버트중에 체크된 것만 선택하고 싶을때 |
| 셀렉터:before {} | 바로 앞에 가상요소를 배치한다. |
| 셀렉터:after {} | 바로 뒤에 가상요소를 배치한다. |
| 문법 | 설명 |
|---|---|
| a:hover {} | 커서를 위에 위치할때 |
| a:visited {} | 한번 방문한적 있는 것 |
| a:link {} | 방문하기 전의 상태(default) |
| a:active {} | 클릭하는 순간의 스타일 |
| 문법 | 설명 |
|---|---|
| 셀렉터1, 셀렉터2, 셀렉터3 {} | 컴마로 셀렉터를 여러개 지정 (나열한 모든 셀렉터에 동일한 스타일을 넣는다.) |
| 셀렉터1 셀렉터2 셀렉터3 {} | 스페이스로 셀렉터 나열 (셀렉터의 계층을 한정한다.) 셀렉터1의 후손의 셀렉터2의 후손의 셀렉터3 것들 스페이스는 이하 자손으로 하위 자손들을 모두 포함 |
| 셀렉터1 > 셀렉터2 > 셀렉터3 {} | > 로 셀렉터를 나열 >는 하위중 바로 아래 자손으로만 한정된다. |
| 셀렉터1 + 셀렉터2 {} | 셀렉터1과 동일한 계층으로 셀렉터1 바로 뒤에오는 셀렉터2에 적용 바로뒤에 셀렉터2 이외의 다른 셀렉터가 오면 적용되지 않는다. |
| 셀렉터1 ~ 셀렉터2 {} | 셀렉터1과 동일한 계층으로 셀렉터1 뒤쪽에 위치한 모든 셀렉터2들에 적용 |
| 문법 | 설명 |
|---|---|
| 셀렉터:nth-child(odd) {} | 홀수번째 해당하는 셀렉터들에 적용한다. (테이블tr 이나 리스트 li등) |
| 셀렉터:nth-child(even) {} | 짝수번째 해당하는 셀렉터들에 적용한다. (테이블tr 이나 리스트 li등) |
| 셀렉터:nth-child(4n) {} | n의 배수번째 셀렉터에만 적용 (위에서는 4의 배수 4,8,12,....) (2n+1)이면 3,5,7,.... |
| 셀렉터:nth-child(5) {} | 다섯번째 셀렉터에만 적용 |
| 셀렉터:nth-last-child(n) {} | 마지막에서 n번째에 해당하는 셀렉터에 적용 |
| 셀렉터:nth-of-type(n) {} | |
| 셀렉터:nth-last-of-type(n) {} |
| 문법 | 설명 |
|---|---|
| 셀렉터1:not(셀렉터2) {} | 셀렉터2 가 아닌 모든 셀렉터1에 적용 = 셀렉터1에 적용하는데 셀렉터2는 제외 다른 패턴과 복합해서 사용가능 예) li:not(:last-child) {} 마지막 li만 빼고, 모든 li에 적용 |
| 셀렉터1:not(셀렉터2):not(셀렉터3) {} | not을 반복사용으로 여러개를 제외시킴 셀렉터2,3 이외에 속하는 모든 셀렉터1에 적용 |
| 문법 | 설명 |
|---|---|
| 셀렉터[속성명] {} | 셀렉터에 속성명이 존재하면 적용 예) img[alt] {} : img태그중 alt속성이 존재하는 것에만 |
| 셀렉터[속성명="값"] {} | 셀렉터에 속성명의 값이 {값}인 것에 적용 |
| 셀렉터[속성명*="값일부"] {} | 셀렉터 속성명의 값에 {값일부}가 포함된것 (정규표현) 예) p[class*="so"] {} : p태그의 클래스에 "so"가 포함된 것들(모든 p태그) |
| 셀렉터[속성명^="값일부"] {} | 셀렉터 속성명의 값이 {값일부}로 시작하는 것들 예) a[href^="http"] {}: a태그의 href 값이 http로 시작하는 모든 것들 |
| 셀렉터[속성명$="값일부"] {} | 셀렉터 속성명의 값이 {값일부}로 끝나는 것들 예) img[src$=".png"] {} : 이미지태그중 리소스가 png인 파일 찾을때 |
| 셀렉터[속성값~="값"} {} | ~는 속성에 해당하는 값을 스페이스로 분리한 것중 {값}이 포함되어 있으면 예) p[class~="gls"] <p class="mm ss gls dd"> 면 OK |
| 셀렉터[data-*="값"] {} | 셀렉터의 속성이 data-로 시작하는 속성의 속성값이 {값}인 것들 |
| 문법 | 설명 |
|---|---|
| 셀렉터:first-child {} | 첫번째 셀렉터에 적용 예) ul li:first-child {} 는 ul아래 첫번째 li에 적용 |
| 셀렉터:last-child {} | 마지막 셀렉터에 적용 예) ul li:last-child {} 는 ul아래 마지막 li에 적용 |
| 셀렉터:first-letter {} | 셀렉터안의 문장에서 맨처음 오는 첫번째 글자에 적용 |
| 셀렉터:first-line {} | 셀렉터안의 문장에서 첫번째 라인에 적용 |