CSS 선택자, 결합자 (미완성)

1. 태그 셀렉터(Type Selector)

 

규칙: 태그이름
설명: 지정된 태그명을 가지는 요소를 선택합니다.

HTML CODE 

<div class="table">
	<bento />
    <plate />
    <bento />
</div>

 

Q. Select the bento boxes

 

 

 

CSS CODE

bento {
}

 

 

2. ID 셀렉터(ID Selector)

 

규칙:  #id이름 
설명: id값을 선택하는 셀렉터입니다. id는 html에서 중복되어 사용할 수 없습니다.

 

Q. Select the fancy plate

 

 

 

CSS CODE

#fancy {
}

 

 

3. 자손 선택자( Descendant Selector )

 

규칙: A B
설명: A안의 모든 B를 선택함. 띄어쓰기 하나 있음. ID 셀렉터 등 여러 요소와 결합시킬 수 있음

 

 

HTML CODE

<div class="table">
	<bento />
    <plate >
    	<apple />
    </plate>
    <apple />
</div>

Q. Select the apple on the plate

 

 

CSS CODE

plate apple {
}

 

 

4. 클래스 셀렉터 (Class Selector)

규칙: .class이름 (점)
설명: class값을 선택하는 셀렉터입니다.  class는 html문서에서 중복되어 쓸 수 있습니다.

HTML CODE

<div class="table>
	<apple/>
    <apple class="small"/>
    <plate>
    	<apple class="small"/>
    </plate>
    <plate/>
</div>   

Q. Select the small apples

 

 

CSS CODE

.small {
}

 

6. 전체 셀렉터(universal selector)

규칙: *
설명: HTML 문서 내의 모든 요소를 선택합니다.
html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)
주로 box-sizing처럼 문서 전체에 한번에 적용해야하는 스타일이 있을때 사용합니다.

HTML CODE

<div class="table">
	<plate id="fancy">
    	<orange class="small">
    </plate>
    <plate>
    	<pickle/>
    </plate>
    <apple class="small"/>
    <plate>
    	<apple/>
    </plate>
</div>

Q. Select everything on a plate

 

CSS CODE

plate *{
}

// plate 에 모든것 선택

 

자식 셀렉터(Child Selector)

 

규칙: 셀렉터A > 셀렉터B
설명: 자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택합니다.

 

HTML CODE

<div class="table">
	<plate>
    	<bento>
        	<apple/>
        </bento>
   	</plate>
    <plate>
    	<apple/>
    </plate>
    <plate/>
    <apple/>
    <apple class="small"/>
</div> 

Q. Select the apple directly on a plate

 

 

 

CSS CODE

plate > apple {
}

 

 

5. Comma Combinator

 

규칙: A, B
설명: 관련없는 A와 B를 동시에 만족하는 CSS 선택

 

HTML CODE

<div class="table">
	<pickle class="small"/>
    <pickle />
    <plate>
    	<pickle/>
    </plate>
    <bento>
    	<pickle/>
    </bento>
   	<plate>
    	<pickle/>
   	</plate>
    <pickle/>
    <pickle class="small"/>
</div>

Q. Select all the plates and bentos

 

 

CSS CODE

plate, bento {
}

 

 

 

7. 인접 형제 결합자(Adjacent Sibling Selector)

 

규칙: A + B
설명:  인접 형제 결합자 (+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소(sibling)만 선택합니다.
두 element는 같은 level 과 depth를 가지고 있어야 한다.
참조 : https://developer.mozilla.org/ko/docs/Web/CSS/Adjacent_sibling_combinator

 

HTML CODE

<div class="table">
	<bento>
    	<apple class="small"/>
	</bento>
    <plate/>
    <apple class="small"/>
    <plate/>
    <apple/>
    <apple class="small"/>
    <apple class="small"/>
</div>

Q. Select every apple that's next to a plate

 

 

CSS CODE

plate + apple{
}

 

 

8. 일반 형제 결합자(General Sibling Selector)

 

규칙: A ~ B
설명: 일반 형제 결합자 (~)는 두 개의 선택자 사이에 위치하여
뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다.
두 요소가 서로 붙어있을 필요는 없습니다.
A 자체는 포함하지 않으며 인접 형제 결합자와 다른점은 인접은 하나만 일반은 모두를 선택한다는것입니다. 

 

 

HTML CODE

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

Q. Select the pickles beside the bento

 

 

 

CSS CODE

bento ~ pickle {
}

 

 

가상 클래스 셀렉터 (Pseudo-Class Selector)

 

- 가상 클래스 셀렉터는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법입니다.

 

마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정해주는 것입니다.

 

가상 클래스는 마침표(.) 대신 콜론(:)을 사용하는데

 

CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다는 특징이 있습니다.

 

참조

 

 

First Child Pseudo-selector

 

규칙:  A:first-child
설명: :first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
주의할 사항은 여기서 A는 perant가 아닌 A 자체를 선택한다는 것이다.

 

HTML CODE

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

Q. Select the top orange

 

 

 

CSS CODE

orange:first-child {
}

 

Only Child Pseudo-selector