선택자 (Selector)

*

전체 요소를 대상으로 함

*{
margin: 0;
padding: 0;
}

// 자식 선택자에도 사용할 수 있다. 
#container * {
border: 1px solid #000;
}

X + Y

인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 적용

/* ul 뒤에 오는 첫 번째 단락의 텍스트 만 빨간색 */
ul + p{
	color: red;
}

X > Y

X 바로 하위 직계 Y만을 적용

/* id가 container인 div의 직계 자손인 ul 만 대상으로 삼는다. */
div#container > ul {
	border: 1px solid black;
}

X ~ Y

인접 선택자, X 아래에 있는 모든 Y 요소를 적용

/* X+Y와 유사하지만 덜 엄격 */
ul ~ p {
	color: red;
}
ul 아래에 있는 모든 p 요소를 선택한다.

X[title]

속성 선택자(Attribute selector), title 어트리뷰트 값을 갖는 요소만 적용

/* a 요소 중에서 href 어트리뷰트를 값는 모든 요소 */
a[href] { color: red; }

X[href="foo"]

속성 선택자(Attribute selector), 어트리뷰트에 맞는 해당 경로에만 적용

a[href="https://net.tutsplus.com"]{
	color: orange
}

X[href*="nettuts"]

*는 입력값이 속성값 안에 해당 값을 포함하면 스타일을 적용

• nettuts.com, net.tutsplus.com, tutsplus.com 까지도 적용됨

/* href값 안에 tuts을 포함하는 모든 url이 선택된다. */
a[href*="tuts"]{
	color: orange
}

X[href^="nettuts"]

입력값과 동일한 값인 경우에 적용

/* http://도 적용되지 않는다. */
a[href^="http"]{
	background: url(path/to/external/icon.png) no-repeat;
  padding-left: 10px;
}

X[href$=".jpg"]

문자열 끝에 적용하는 정규 표현식 기호인 $으로, 뒤 파일 형식에 따라 스타일 적용

/* 이미지로 링크가 걸린 앵커 전체를 찾는다. gif / png는 영향을 받지 않는다. */
img[href$=".jpg"] {
	color: red;
}

X[data-X="foo"]

data-X의 타입이 foo인 경우, 스타일 적용

여러가지 이미지 형식(png,jpg,jpeg,gif)등 데이터 타입 설정해서 스타일 적용

/* html */
<a href="path/to/image.jpg" data-filetype="image"> Image link </a>

/* css */
a[data-filetype="image"] {
	color: red;
}

/* 위와 동일한 방식은 하단이지만, 비효율적이다. */
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
	color: red;
}

X[foo~="bar"]

data-info 속성을 만들고, 띄어쓰기로 구분한 목록을 선택하여 스타일 적용

/* html */
<a href="path/to/image.jpg" data-info="external image">Click me</a>
/* css */
a[data-info~="external"]{
	color: red;
}
a[data-info~="image"]{
	border: 1px solid red;
}

input[type=radio]:checked

input radio가 체크 되었을 경우 스타일 적용

input[type=radio]:checked{
	border: 1px solid #fff
}

X:after

선택된 요소 뒤편에 요소를 생성한다.

// 요소 뒤에 공간을 덧붙이고, float 효과를 제거하는데 사용했다.
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

X:not(선택자)

선택한 요소를 제외하고 선택하는 것

/* 모든 div를 선택하고 싶은데, 그 중에서 #contaner 인 것만 빼고 싶을 때 사용 */
div:not(#container){
	color: blue;
}

/* p 태그만 제외하고 요소 전체를 선택 */
*:not(p){
	color: green;
}

X::가상요소

첫번째 줄이나, 첫 글자와 같이 요소 일 부분에 스타일을 적용할 때 사용

• 효과를 보려면 반드시 block 레벨 요소에 적용해야 한다.

p::first-line{
	font-weight: bold;
}

p::first-letter{
	font-size: 2em;
}

X:nth-child(n)

특정 요소를 지목, 4n 과 같은 n번째 마다도 선택이 가능

li.nth-child(5n){
	color: red;
}

X:nth-last-child(n)

끝에서부터 n 번째 요소를 선택, 위와 순서만 다르고 의미 동일

li.nth-last-child(3){
	color: red;
}

X:nth-of-type(n)

type에 따라 선택

/* ul의 다섯번째 스타일에만 blue를 준다. */
ul:nth-of-type(5){
	color: blue;
}

X:nth-last-of-type(n)

목록 선택자의 끝부터 선택한다.

/* 마지막 ul에서 5번째 스타일에만 color를 준다. */
ul:nth-last-of-type(5){
	color: blue;
}

X:first-child / X:last-child

요소의 첫 번째/마지막 번째 자식만 대상으로 삼는다.

li:first-child{
	border-top:none;
}

li:last-child{
	border-bottom: none
}

X:only-child

동일한 형식이어도, 단 하나의 자식 요소를 선택한다.

/* 두 전빼 div 문단은 대상이 되지 않고, 오직 첫 번째 div 가 대상이 된다. */
/* html */
<div><p> My paragraph here. </p></div>
 
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

/* css */

div p:only-child {
   color: red;
}

X:only-of-type

부모 컨테이너에 형제 요소가 없는 요소를 선택한다.

/* html */
<div>
   <p> My paragraph here. </p> /* 선택 */
   <ul>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
   <ul>
      <li> List Item </li> /* 선택 */
   </ul>
</div>

/* ul에 li가 단 한나만 존재하는 요소만 선택한다. */
li:only-of-type{
	font-weight: bold
}

/* 한 컨테이너 안에 p요소 단 하나만 존재하는 요소만 선택한다. */
p:only-of-type{
	color: red
}

X:first-of-type

해당 type의 첫 번째 형제 선택자를 선택할 수 있다.

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
 
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

List Item 2 선택하기
p + ul li.last-child { 
	color: red
}

ul:first-of-type li:nth-last-child(1){
	color: red
}

ul:first-of-type > li:nth-child(2){
	color: red
}