기본
HTML
CSS
javascript
jQuery
PHP
MYSQL
<ul id="tutorials"> <li class="tutorial" id="HTML"> HTML </li> <li class="tutorial" id="CSS"> CSS </li> <li class="tutorial" id="javascript"> javascript </li> <li class="tutorial" id="jquery"> jQuery </li> <li jclass="tutorial" id="PHP"> PHP </li> <li class="tutorial" id="MYSQL"> MYSQL </li> </ul>
- id 선택자
- class 선택자
- 엘리먼트 선택자
- 다중 선택자
filter
HTML
CSS
javascript
PHP
MYSQL
<ul id="list"> <li> HTML </li> <li> CSS </li> <li> javascript </li> <li> PHP </li> <li> MYSQL </li> </ul>
- 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
- 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
- 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
- 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자
- 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자
- 첫번재 인덱스 엘리먼트에 대한 선택자
- 마지막 인덱스 엘리먼트에 대한 선택자
속성
ABCD
BCDE
CDEF
DEFG
EFGH
FGHI
<ul id="attribute"> <li target="ABCD">ABCD</li> <li target="BCDE">BCDE</li> <li target="CDEF">CDEF</li> <li target="DEFG">DEFG</li> <li target="EFGH">EFGH</li> <li id="FGHI" target="FGHI">FGHI</li> </ul>
- 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자
- 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자
- 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자
- 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자
- 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자
- 속성이 존재하는 엘리먼트를 찾아내는 선택자
- 속성들이 존재하는 엘리먼트를 찾아내는 선택자
Form
<div> <input type="text" disabled="disabled" value="disabled" /> <input type="text" value="enabled"/> </div> <div><input type="checkbox" checked="checked" /></div> <div><input type="checkbox" /></div>
- 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다.
- disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자
- disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자
- 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자