Samla's Study

 

1. Tag (태그 이름)

<style>
	/* 모든 <h1> 태그 */
	h1 {
    	font-size: 80px;
        }

</stlye>

<h1>CSS 적용 대상 O</h1>
<h2>CSS 적용 대상 X</h2>

 

2. Class (클래스) / Id (아이디)

<style>
	/* class 'red' 를 갖는 모든 태그 (class는 '.'를 앞에 붙여표시) */
	.red {
    	color: red;
        }
        
 	/* id 'blue' 를 갖는 태그 (id는 '#'를 앞에 붙여표시) */
	#blue {
    	color: blue;
        }

</stlye>

<p class="red">CSS 적용 대상 O</p>
<p class="none1">CSS 적용 대상 X</p>
<p>CSS 적용 대상 X</p>


<p id="blue">CSS 적용 대상 O</p>
<p id="none2">CSS 적용 대상 X</p>
<p>CSS 적용 대상 X</p>

 

3. Children (자식)

<style>
	/* class 'parents'를 갖고 있는 자식 요소 중 모든 <h1>태그 */
	.parents h1 {
    	color: orange;
        }

</stlye>

<div class="parents">
	<h1>CSS 적용 대상 O</h1>
	<h2>CSS 적용 대상 X </h2>
	<p>CSS 적용 대상 X</p>
</div>

 

4. Direct Children (직속 자식)

<style>
	/* class 'parents'를 갖고 있는 요소의 직속 자식 중 모든 자식 요소 중 모든 <i> 태그 */
	.parents > p {
    	color: green;
        }

</stlye>

<div class="parents">
	<i>CSS 적용 대상 O</i>
	<p>직속 자식이 아닌 태그는 <i>CSS 적용 대상 X </i></p>
	<i>CSS 적용 대상 O</i>
</div>

 

5. 복수 선택 (Or 조건)

<style>
	/* class 'hello'나 'world'를 갖고 있는 모든 태그 선택 */
	.hello, .world {
    		color: hotpink;
        }

</stlye>

<div class="parents">
	<p="hello">CSS 적용 대상 O</p>
	<p="world">CSS 적용 대상 O</p>
    <div>
    	<p="hello">CSS 적용 대상 O</p>
        <p="world">CSS 적용 대상 O</p>
        <p="goodbye">CSS 적용 대상 X</p>
        <p="human">CSS 적용 대상 X</p>
    </div>
</div>

6. 여러 조건 (And 조건)

<style>
	/* class 'hello'와 'world'를 동시에 갖고 있는  태그 선택 */
	.hello.world {
    		color: blue;
        }

</stlye>

<div class="parents">
	<p="hello world">CSS 적용 대상 O</p>
	<p="world">CSS 적용 대상 x</p>
    <div>
    	<p="hello human">CSS 적용 대상 x</p>
        <p="world">CSS 적용 대상 x</p>
        <p="goodbye wolrd">CSS 적용 대상 X</p>
        <p="hello world human">CSS 적용 대상 O</p>
    </div>
</div>

7. Pseudo-Class (가상 클래스)

• 콜론(:)을 사용해서 가상 클래스 선택 가능.

    n번째 자식

<style>
	/* .parents 클래스의 자식인 <p> 태그 중 3번째 요소 선택 */
	.parents p:nth-child(3) {
    		color: red;
        }

</stlye>

<div class="parents">
	<p>CSS 적용 대상 X</p>
   	<p>CSS 적용 대상 X</p>
	<p>CSS 적용 대상 O</p>
</div>


<style>
	/* .mother 클래스의 자식인 <p> 태그 중 1번째 요소 선택 */
	.mother p:firtst-child {
    		color: orange;
        }

</stlye>

<div class="mother">
	<p>CSS 적용 대상 O</p>
   	<p>CSS 적용 대상 X</p>
	<p>CSS 적용 대상 X</p>
</div>


<style>
	/* .father 클래스의 자식인 <p> 태그 중 마지막 요소 선택 */
	.father p:last-child {
    		color: yellow;
        }

</stlye>

<div class="father">
	<p>CSS 적용 대상 X</p>
   	<p>CSS 적용 대상 X</p>
	<p>CSS 적용 대상 O</p>
</div>


<style>
	/* .freinds 클래스의 자식인 <p> 태그 중 마지막이 아닌 나머지 요소 선택 */
	.freinds p:not(last-child) {
    		color: green;
        }

</stlye>

<div class="freinds">
	<p>CSS 적용 대상 O</p>
   	<p>CSS 적용 대상 O</p>
	<p>CSS 적용 대상 X</p>
</div>

 

    마우스 오버 (Hover)

<style>
	/* <h1>태그 요소에 마우스가 올라갈 경우 적용 */
	h1:hover {
    		color: orange;
        }

</stlye>

<h1>Mouse Over</h1>