Css/Training/Selectors - W3C Wiki

Trang chủ » H1 H2 P Css » Css/Training/Selectors - W3C Wiki

Có thể bạn quan tâm

  • CSS Educational Materials
    • Week 1
      • Introduction to CSS
        • What is CSS
        • Syntax
        • Selectors
        • Create CSS
Selectors

Selectors are specify the target of styling. Selectors may range from simple element names to rich contextual representations.

Kind of selector

Type selector

A type selector is the name of HTML Tag.

[index.html]

<p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p>

[style.css]

p{ color: red; font-size: 12px; }

Class selector

Class selector is used for one or more elements. It is described the value of class attribute of HTML document with ".(period)".

[index.html]

<p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> <p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p>

[style.css]

p{ font-size: 12px; } .red{ color: red; } .blue{ color: blue; }

ID selector

ID selector is used for unique element. It is described the value of ID attribute of HTML document with "#".

[index.html]

<p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> <p class="red" id="small">This is a paragraph</p>

[style.css]

p{ font-size: 12px; } .red{ color: red; } .blue{ color: blue; } #small{ font-size: 9px; }

Descendant combinator

A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

[index.html]

<h1>This is a <em>header</em></h1> <p>This is a <em>paragraph</em></p>

[style.css]

h1 em{ color: red; font-size: 12px; }

The selector introduces here is not all. See also Selectors Level 3.

Grouping

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

[index.html]

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4>

[style.css]

h1, h2, h3, h4{ color: red; font-size: 12px; }

Let's try to creating CSS!

Từ khóa » H1 H2 P Css