javascript & jQuery

CSS Selector

k9e4h 2016. 9. 20. 11:43

http://flukeout.github.io/

게임하면서 정리하는 것


http://cssreference.io/



Level 4

Descendant Selector (자식 선택자)

A  B
Selector an element inside another element


Selects all B insite of A. Here B is the descendant element, meaning an element that is inside of another element.


p string will select all <strong> that are descendants of any <p>

#fancy span will select any <span> that is a descendant of any element with id="fancy"


A > B {} 로 표현가능, 콤마로 이어지는것은 동일한 위치



Level 7

Combine the Class Selector

A.className

You can combine the class selector with other selectors, like the type selector.


ul.important will select all <ul> elements that have class="important"

#big.wide will select all elements with id="big" that also have class="wide"



Level 10

The Universal Selector

*

You can select everything!


You can select all elements with the universal selector!


p * will select every element inside all <p> elements.





모르겠..

+ only-child 밑으로 CSS3 선택자, :first-child는 IE8에서도 적용 가능












Level 12


Adjacent Sibling Selector

Select an element that directly follows another element

A + B

This selects all B elements that directly followA. Elements that follow one another are called siblings. They're on the same level, or depth. 

In the HTML markup for this level, elements that have the same indentation are siblings.

p + .intro will select every element withclass="intro" that directly follows a p
div + a will select every a element that directly follows a div


옆에있는 것 선택 (tag 기준으로 아래를 의미?)



Level 13


General Sibling Selector

Select elements that follows another element

A ~ B

You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.

A ~ B will select all B that follow a A



옆에있는 것의미


<div class="table">

<pickle/>
<bento>
<orange class="small"/>
</bento>
<pickle class="small"/>
<pickle/>
<plate>
<pickle/>
</plate>
<plate>
<pickle class="small"/>
</plate>

</div>



에서 bemto ~ pickle을 하면 그 뒤의 plate 하위의 pickle은 선택안됨



++ >>>>>>>>>> 형재의 형재를 찾는듯...

Level 16..





반응형

'javascript & jQuery' 카테고리의 다른 글

Javascript 이야기  (0) 2016.10.10
attr() VS prop()  (0) 2016.09.29
CSS Cheat Sheet  (0) 2016.09.20
각 브라우저별 특징  (0) 2016.09.12
jQuery 요소 찾기  (0) 2016.09.09