CSS - 선택자(selector)

CSS 선택자

이건 JS 를 하는사람이라면 똑같아서

구지 안쓰려 햇지만 한번 써봅니다.

div { background-color : red; } // 태그 선택자 <div></div> .class { background-color : red; } // 클래스 선택자 <div class = 'class'></div> #id { background-color : red; } // ID 선택자 <div id = 'id'></div> //전체 선택자 *{background-color : red} // 모두 전체 선택 //하위선택 , 자식선택 , 다중선택 div,span { background-color : red; } // div , span 둘다 선택 div li { background-color : red; } // div 안에 있는 하위태그인 li 의 모든요소 div > li { background-color : red; } // div 안에 있는 바로 밑에있는 자식태그의 li만 선택 //형제선택 , 인접형제선택 div ~ span { background-color : red; } // div 선택자의 형제요소중 span 선택 //div 초과 span 미만 div + span { background-color : red; } // div 선택자의 형제요소 중 첫번쨰 span 선택 //속성 선택자 [attribute] // 속성을 가진 태그 모두선택 [attribute="value"] // 속성값이 value 인 태그 모두 선택 [attribute~="value"] // 속성값이 value 를 포함한 태그를 선택 //<h1 title="value xyz">Lorem</h1> (o) <h1 title="valuexyz">Lorem</h1> (x) [attribute|="value"] //속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다. //<h1 title="value xyz">Lorem</h1> (x) <h1 title="valuexyz">Lorem</h1> (o) [attribute^="value"] //속성의 값이 value로 시작하는 모든요소를 선택합니다. //<h1 title="value xyz">Lorem</h1> (o) <h1 title="valuexyz">Lorem</h1> (o) [attribute$="value"] // 속성의 값이 value로 끝나는 요소를 선택합니다. //<h1 title="xyz value">Lorem</h1> (o) <h1 title="xyzvalue">Lorem</h1> (o) [attribute*="value"] //속성의 값이 value를 포함한 요소를 선택합니다. //<h1 title="xyz value xxx">Lorem</h1> (o) <h1 title="xyzvaluexxx">Lorem</h1> (o) // 원하는 자식 선택 div:nth-child(5) // div의 5번쨰 자식 선택 (괄호안에 숫자) div:nth-child(5n) // div의 5의 배수들만 선택 div:nth-child(3n + 2) // 2번쨰 선택후 3의배수로 선택 //짝수, 홀수 선택 div:nth-child(odd) // 홀수 선택 div:nth-child(even) // 짝수 선택 //뒤에서부터 선택 div:nth-last-child(2) // 뒤에서 2번째자식 선택 나머진 동일 //nth-child 주의할것 nth-child는 엘리먼트의 자식들을 선택하는거다 예를들면 <ul> <div></div> // nth-child(1) <li>1</li> // nth-child(2) <li>2</li> // nth-child(3) <li>3</li> // nth-child(4) </ul> 요렇게 자식들이 태그의 상관없이 순서가 정해져있기 때문에 li태그중 젤 첫번쨰가아닌 각각의 노드들중의 숫자로 선택한다

​

CSS선택을 할수있는 재미난 게임

(움직이는 것들만 CSS로 셀렉터를 이용하여 선택해보자

http://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

저는 32탄까지 다꺳는데 재미있네요 제가 위에 써논걸로 전부꺨수 있으니 한번 해보세여