Basic Seletors

全オプション(Universal Selector)

* { property: value }

ラベルセレクタ

 tagName { property: value }

IDセレクタ

#idName { property: value }

クラスセレクタ

.className { property: value }

属性セレクタ

/** 1. selector[attribute] 
 *  a 요소 중 href 속성을 갖는 모든 요소
 */
 a[href] { property: value }

/** 2. selector[attribute="value"] 
 *  a 요소 중 target 속성이 "_blank"인 모든 요소
 */
 a[target="_blank"] { property: value }

/** 3. selector[attribute~="value"] 
 *  h1 요소 중 title 속성에 one(공백으로 구분된)을 포함하는 요소
 */
 h1[title~="one"] { property: value }

/** 4. selector[attribute^="value"] 
*  a 요소 중 href 속성의 값이 http://로 시작하는 모든 요소
*/
a[href^="http://"] { property: value }

/** 5. selector[attribute$="value"] 
*  a 요소 중 href 속성의 값이 abc.html로 끝나는 모든 요소
*/
a[href$="abc.html"] { property: value }

/** 6. selector[attribute*="value"] 
 *  h1 요소 중 title 속성에 one(공백으로 구분하지 않은)을 포함하는 요소
 */
 h1[title*="one"] { property: value }

Grouping Seletors

A, B ...{ property: value }

Combinators

子セレクタ

/** 
 *  supA subB { property: value }
 */
div a { property: value }

サブセレクタ

/** 
 *  supA > subB { property: value }
 */
div > a { property: value }

隣接する兄弟セレクタ

/** 
 *  A + B { property: value }
 */
div + a { property: value }

通常の兄弟セレクタ

/* 
 * A ~ B { property: value }
 */
div ~ a { property: value }

Pseudo-Class

A:Pseudo-class { property: value }

リンクセレクタ

ダイナミックセレクタ

Structure pseudo-clases

仮想要素セレクタ

A::Pseudo-element { property: value; }