CSS(Selector 구체적으로)

html
<span id="label" class="center">...<span>

css
#label.center{...}      // id가 label이며서 동시에 class가 center인 엘리먼트를 선택한다.

셀렉터

h1 {}
div {}

전체 셀렉터

* {}

Tag 셀렉터

section, h1 {}

( 쉼표(,) 는 section 과 h1을 다중으로 선택한다)

ID 셀렉터

#only {}

class 셀렉터

.widget {}
.center {}

후손 셀렉터

header h1 {}

자식 셀렉터( 후손 셀렉터와의 차이를 반드시 기억하자)

header > p {}

인접 형제 셀렉터

section + p {}

형제 셀렉터

section ~p {}

 

<여러 방법으로 selector 표현하는방법>

html
<span id="label" class="center">...<span>

css
#label.center{...}      // id가 label이며서 동시에 class가 center인 엘리먼트를 선택한다.

html
<section class = "show">
<h2>...</h2>
</section>

css                   // section의 후손 엘리먼트 중 h2 엘리먼트를 선택한다.
section h2 {...}

html
<p id = "only" class = "show">...</p>

css             // class가 show이면서 동시에 id가 only인 엘리먼트이다.
.show#only{...}

html
<article>
	<ul class = "max-auto">
    	<li id="first_li" class ="item">...</li>
    </ul>
</article>

css 				// article의 후손 엘리먼트 중 class가 item인 엘리먼트를 선택한다.
article .item{...}

자식엘리먼트

html
<header>
	<h1>...</h1>
    <p id ="header_title_assi" class ="intro">...</p>
</header>

css					// >는 header의 자식 엘리먼트 p를 선택한다.
header > p {...}

html
<div>
<article>
 <p>...</p> 		//(x) 
<article>
<p>...</P>		//(0)
</div>

css
article + p {...}  // +는 article과 인접한 형제 엘리먼트 p를 선택한다.

html
<div>
<section>
</section>
<section>
</section>
<p>...</p>
</div>

css
section ~ p {...}	// ~는 section과 인접한 형제 엘리먼트 p를 모두 선택한다.

 

예를 통한 그밖의 태그

css
section > p:nth-child(2n+1) {...} // section의 자식 엘리먼트 중에서 홀수 번째 자식 엘리먼트가 p인것을 선택
footer > div:first-child {...} // footer의 자식 엘리먼트 중에서, 첫번째 자식 엘리먼트가 div인것을 선택

html
<div></div>
<div></div>			// (0)
<footer>
<div></div>
<div></div>
<div></div>			// (0)
</footer>

css
div:last-child {...} // div엘리먼트 중 마지막 자식 엘리먼트를 선택한다.