선택자

CSS

ToKor 2020. 12. 23. 03:18

body>table: <body><table> // table should be directly child element

table.list: <table class="list>

table#list: <table id="list">

div+p: <div><p> div 바로 다음에 오는 p태그

td,th: <td> and <th>

form div: <form> ... <div> // div is child element of form - do not have to be in direct

[title]: attribute selector, <h1 title="heading"> attribute가 title임

input[type=text]: <input type="text"> Tag는 인풋, Attribute는 타입, Value는 텍스트

Input[type=”submit”]{border:1px solid green;}: type다음에 해당 밸류일 때

tr:nth-child(even): <tr:nth-child>

p~ul: p다음에 오는 모든 ul (p가 부모가 아니라 먼저오는것임)

<p></p><ul></ul><span></span><ul></ul>모든 ul 해당

<p></p><ul></ul><span><ul></ul><span> 두번째 ul은 부모가 span이므로 p 다음에 온다고 볼 수 없다

Selector + Reg

css[attribute ~= “value”] selector

[class~=”warning”]{…} // class다음에 warning이고 빈칸 띄어쓰기로 구분되었을경우 해당, 그냥 자신만 쓰여도 해당, 즉 거꾸로도됨

css[attribute |= “value”] selector

[lang=~en-us”]{…} // lang다음에 –(hyphen-separated)로 구분되었을경우 해당, 그냥 자신만 쓰여도 해당, 즉 거꾸로도됨

css[attribute ^= “value”] selector

a[href^=”http://”]{…} // href다음에 특정 문자로시작될때

css[attribute $= “value”] selector

a[href$=”.pdf”]{…} // href다음에 특정 문자로 끝날때

css[attribute *= “value”] selector

a[class*=”warning”]{…} // class다음에 waring 문자가 들어간 모든것