แบ่งออกเป็น 5 ประเภท
Simple selectors
Element Selector
ตัวอย่าง
|
|
p { text-align: center; color: red; } |
|
|
h1, h2, p { text-align: center; color: red; } |
ID Selector (#)
ID ในหนึ่งหน้ามี ID เดียว
ตัวอย่าง
|
|
#para1 { text-align: center; color: red; } |
Class Selector (.)
ในหนึ่งหน้า สามารถมีได้หลาย Class
ตัวอย่าง
|
|
.center { text-align: center; color: red; } |
ระบุ Element ที่มี Class ที่ต้องการ
|
|
p.center { text-align: center; color: red; } |
Element นึงมีได้หลาย Class
|
|
<p class="center large">This paragraph refers to two classes.</p> |
All CSS Simple Selectors
| Selector |
Example |
Example description |
| .class |
.intro |
Selects all elements with class=”intro” |
| #id |
#firstname |
Selects the element with id=”firstname” |
| * |
* |
Selects all elements |
| element |
p |
Selects all <p> elements |
| element,element,.. |
div, p |
Selects all <div> elements and all <p> elements |
Combinator Selectors ความสัมพันธ์ระหว่าง Selector
| Selector |
Example |
Example description |
| elementelement |
div p |
Selects all <p> elements inside <div> elements |
| element>element |
div > p |
Selects all <p> elements where the parent is a <div> element |
| element+element |
div + p |
Selects all <p> elements that are placed immediately after <div> elements |
| element1~element2 |
p ~ ul |
Selects every <ul> element that are preceded by a <p> element |
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
All CSS Pseudo Classes
| Selector |
Example |
Example description |
| :active |
a:active |
Selects the active link |
| :checked |
input:checked |
Selects every checked <input> element |
| :disabled |
input:disabled |
Selects every disabled <input> element |
| :empty |
p:empty |
Selects every <p> element that has no children |
| :enabled |
input:enabled |
Selects every enabled <input> element |
| :first-child |
p:first-child |
Selects every <p> elements that is the first child of its parent |
| :first-of-type |
p:first-of-type |
Selects every <p> element that is the first <p> element of its parent |
| :focus |
input:focus |
Selects the <input> element that has focus |
| :hover |
a:hover |
Selects links on mouse over |
| :in-range |
input:in-range |
Selects <input> elements with a value within a specified range |
| :invalid |
input:invalid |
Selects all <input> elements with an invalid value |
| :lang(language) |
p:lang(it) |
Selects every <p> element with a lang attribute value starting with “it” |
| :last-child |
p:last-child |
Selects every <p> elements that is the last child of its parent |
| :last-of-type |
p:last-of-type |
Selects every <p> element that is the last <p> element of its parent |
| :link |
a:link |
Selects all unvisited links |
| :not(selector) |
:not(p) |
Selects every element that is not a <p> element |
| :nth-child(n) |
p:nth-child(2) |
Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) |
p:nth-last-child(2) |
Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) |
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
| :only-of-type |
p:only-of-type |
Selects every <p> element that is the only <p> element of its parent |
| :only-child |
p:only-child |
Selects every <p> element that is the only child of its parent |
| :optional |
input:optional |
Selects <input> elements with no “required” attribute |
| :out-of-range |
input:out-of-range |
Selects <input> elements with a value outside a specified range |
| :read-only |
input:read-only |
Selects <input> elements with a “readonly” attribute specified |
| :read-write |
input:read-write |
Selects <input> elements with no “readonly” attribute |
| :required |
input:required |
Selects <input> elements with a “required” attribute specified |
| :root |
root |
Selects the document’s root element |
| :target |
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid |
input:valid |
Selects all <input> elements with a valid value |
| :visited |
a:visited |
Selects all visited links |
All CSS Pseudo Elements
| Selector |
Example |
Example description |
| ::after |
p::after |
Insert content after every <p> element |
| ::before |
p::before |
Insert content before every <p> element |
| ::first-letter |
p::first-letter |
Selects the first letter of every <p> element |
| ::first-line |
p::first-line |
Selects the first line of every <p> element |
| ::selection |
p::selection |
Selects the portion of an element that is selected by a user |
CSS Attribute Selectors
All CSS Attribute Selectors
| Selector |
Example |
Example description |
| [attribute] |
[target] |
Selects all elements with a target attribute |
| [attribute=value] |
[target=_blank] |
Selects all elements with target=”_blank” |
| [attribute~=value] |
[title~=flower] |
Selects all elements with a title attribute containing the word “flower” |
| [attribute|=value] |
[lang|=en] |
Selects all elements with a lang attribute value starting with “en” |
| [attribute^=value] |
a[href^=”https”] |
Selects every <a> element whose href attribute value begins with “https” |
| [attribute$=value] |
a[href$=”.pdf”] |
Selects every <a> element whose href attribute value ends with “.pdf” |
| [attribute*=value] |
a[href*=”w3schools”] |
Selects every <a> element whose href attribute value contains the substring “w3schools” |
ดูเพิ่มเติม : https://www.w3schools.com/css/css_selectors.asp
ป้ายกำกับ:css, CSS Selectors
