프로그래밍/웹

css 선택자

써드아이 2022. 3. 5. 11:36

https://www.codingfactory.net/12644


selector.class

selector selector
하위 선택 

selector > selector
자식 선택

selector ~ selector
형제 선택

selector + selector
형제 선택자중 첫번째 

selector::before
선택자 앞쪽에 무언가 한다.

selector::after

 선택자 다음에 무언가 한다.


[attr]
특정 이름(attr)을 가진 속성 선택

tag[attr]
특정 이름(attr)의 속성을 가진 tag이름의 요소 선택

tag[attr = "value"]
특정 이름(attr)의 속성에 특정 값(value)을 가진 tag이름의 요소 선택
(value값이 정확하게 일치해야함)

tag[attr ~= "value"]
특정 이름(attr)의 속성에 특정 값(value)을 가진 tag이름의 요소 선택
(value값이 정확하게 일치해야함)

tag[attr |= "value"]
특정 이름(attr)의 속성에 특정 값(value)을 가진 tag이름의 요소 선택
(value값을 포함한 단어)

tag[attr ^= "value"]
특정 이름(attr)의 속성에 특정 값(value)으로 시작하는 tag이름의 요소 선택

tag[attr $= "value"]
특정 이름(attr)의 속성에 특정 값(value)으로 끝나는 tag이름의 요소 선택

tag[attr *= "value"]
특정 이름(attr)의 속성에 특정 값(value)을 포함한 tag이름의 요소 선택