CSS 선택자 (일반선택자)

일반선택자는 아래와 같은 종류 들이 있습니다.

참조

• 속성 선택자 (Attribute selectors)
• 클래스 선택자 (Class selectors)
• 아이디 선택자 (ID selectors)
• 타입 선택자 (Type selectors)
• 공용(유니버스) 선택자 (Universal selectors)

속성 선택자 (Attribute selectors)

E[foo], E[foo="warning"], E[foo~="warning"], E[lang|="en"] (속성 선택자) foo라는 속성과 warning이라는 값을 가진 E엘리먼트를 선택한다.

<input type="text" />
<textarea></textarea>

위와 같은 폼 컨트롤의 경우 사이트 전반적으로 일정한 보터를 주는 경우가 있는데 이럴 경우 아래와 같이 손쉽게 스타일을 적용 할 수 있다. IE6에서는 구현되어 있지 않다.

input[type="text"], textarea {
  border: 1px solid #eee;
}

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

input[type="text"] {
  color: red;
}

클래스 선택자 (Class selectors)

HTML에서만 사용할 수 있으며, warning이라는 class를 갖고 있는 DIV 엘리먼트를 선 택한다. class는 하나의 페이지에서 여러번 사용할 수 있기 때문에 반적적으로 여러번 나 오는 스타일의 경우 class를 지정해서 정의하여 사용하게 된다.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

아이디 선택자 (ID selectors)

ID가 myid인 E 엘리먼트를 선택한다. descendant selector와 같이 사용하여 우선순위의 조정에 많이 사용된다. id를 사용하지 않고 class만을 사용하게 되면 다른 페이지나 다른 정의에서 사용된 셀렉터와 겹치게 될 수가 있다. 이를 방지하기 위해서 id를 하나 선언을 하고 descendatd selector를 사용하여 CSS를 정의하면 우선순위를 확실하게 구별할 수 있기 때문에 이러한 염려를 하지 않아도 된다.

#demo {
  border: red 2px solid;
}

타입 선택자 (Type selectors)

E엘리먼트를 선택한다. 예를 들어서 "body"와 같이 사용하면 body 엘리먼트를, “div”와 같이 사용하면 div 엘리먼트를 선택한다.

/* All <a> elements. */
a {
  color: red;
}

공용(유니버스) 선택자 (Universal selectors)

모든 엘리먼트를 선택한다.

* {
  margin: 0;
  padding: 0;
}

이와 같은 선언을 할 경우 페이지 내의 모든 <h1>, <h2>, <p>, <form>, <blockqoute> 등의 브라우져 기본 마진과 패딩을 갖고 있는 엘리먼트들이 여백이 없어지게 된다.

div.search * {
  vertical-align: middle
}

이 경우 div.search안의 모든 엘리먼트가 세로로 가운데 정렬이 되게 된다.

/* Selects all elements */
* {
  margin: 0;
  padding: 0;
}

* [lang^=en] {
  color: green;
}

*.warning {
  color: red;
}

*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left
}

/* automatically clear the next sibling after a floating element */
.floating + * {
  clear: left;
}

div.search * {
  vertical-align: middle
}