css selector

css selector는 html 요소를 tag, id, html 태그 속성들을 통해 쉽게 찾아주는 방법!

https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01

CSS Selectors Cheatsheet

 

 

 

 

 

참고로

 

pseudo-class인 nth-child 와

nth-of-type의 차이는?

#jisu > p:nth-child(2) { color : red } = id가 jisu인 태그의 자식 태그들 중에서

n번째 자식 태그가 p이면 색상을 red로 변경.

 

#jisu > p:nth-of-type(2) { color : red } = id가 jisu인 태그의 자식 태그들 중에서

n번째 p태그의 색상을 red로 변경.

 

 

 

 

++

쿼리셀렉터란?

jquery의 css태그 selecter(선택자)

 

기본 js의 경우 html파일내에서 아래와같은 html태그가 있다고 가정했을때,

<input id=”test” type=”text” name=”test_name” value=”test” />

document.getElementById(“test”); 통해 id에 접근

 

하지만 jquery에서는 input 태그의 요소중 id를 통해 접근하려고 할때

$(“input#test”); 또는 $(“input [id=test]”);

와 같은 문법으로 input 태그로 접근 가능!

위에서 input은 생략가능하고

위와 같이 호출한 태그에 CSS를 변경 하거나 메소드를 추가할 수 있음