Selector

Ví dụ

Giải nghĩa ví dụ

Phiên bản

.class

.dangvanlel

Chọn toàn bộ thẻ có class="dangvanlel"

1

#id

#tvlt

Chọn thẻ html có id="tvlt"

1

*

*

Chọn toàn bộ thẻ html

2

html

p

Chọn toàn bộ thẻ <p>

1

html, html

div, p

div, p, span

Chọn toàn bộ thẻ <div> và toàn bộ thẻ <p>

Chọn toàn bộ thẻ <div> và thẻ <p> và thẻ <span>

Lưu ý: Cú pháp này cũng có ý nghĩa giống như selector, selecor vậy. Tức là nhiều Selector sẽ sử dụng chung một đoạn code css bằng cách này được.

1

html html

div p

Chọn toàn bộ thẻ <p> tìm thấy trong các thẻ <div>

Lưu ý: miễn là một thẻ <p> truy ngược ra cho tới gốc cuối cùng mà gặp một thẻ <div> thì sẽ được chọn bởi Selector này.

1

html>html

div > p

Chọn toàn bộ thẻ <p> mà là con trực tiếp của các thẻ <div>.

Lưu ý: Selector này khác với Selector phía trên ở chỗ là thẻ <p> phải là con trực tiếp của thẻ <div>

2

html+html

div + p

Chọn tất cả thẻ <p> được đặt ngay sau một thẻ <div>.

Lưu ý: thẻ <p> đặt ngay sau thẻ <div> chứ không phải nằm trong thẻ <div>

2

html~html

div ~ p

Chọn tất cả thẻ <p> được đặt sau một thẻ <div> đầu tiên tìm thấy.

Lưu ý: từ vị trí tìm thấy thẻ <div> đầu tiên. Tất cả thẻ <p> nhìn thấy sau đó sẽ bị chọn bởi selector này

3

[attribute]

[src]

Chọn toàn bộ thẻ html có sử dụng thuộc tính src

2

[attribute=value]

[src="./hinh.jpg"]

Chọn toàn bộ thẻ html có sử dụng thuộc tính src và giá trị của thuộc tính src phải là "./hinh.jpg"

2

[attribute~=value]

[title~=" viện"]

Chọn toàn bộ thẻ html có thuộc tính title và giá trị của thuộc tính title phải chứa từ viện.

Lưu ý: chỉ áp dụng cho một từ (1 chữ)

2

[attribute|=value]

[title|="viện"]

Chọn toàn bộ thẻ html có thuộc tính title và giá trị của thuộc tính title phải bắt đầu là chữ " viện"

Lưu ý: chỉ áp dụng cho một từ (1 chữ)

2

[attribute^=value]

a[href^="https"]

Chọn toàn bộ thẻ <a> có thuộc tính href và giá trị của thuộc tính href phải bắt đầu là chuỗi "https"

Lưu ý: có thể áp dụng cho chuỗi (nhiều chữ)

3

[attribute$=value]

a[href$=".pdf"]

Chọn toàn bộ thẻ <a> có thuộc tính href và giá trị của thuộc tính href phải kết thúc là ".pdf"

Lưu ý: có thể áp dụng cho chuỗi (nhiều chữ)

3

[attribute*=value]

a[href*="tvlt tut"]

Chọn toàn bộ thẻ <a> có thuộc tính href và giá trị của thuộc tính href phải có chứa chuỗi "tvlt tut"

Lưu ý: có thể áp dụng cho chuỗi (nhiều chữ)

3

:active

a:active

Selects the active link

1

::after

p::after

Insert something after the content of each <p> element

2

::before

p::before

Insert something before the content of each <p> element

2

:checked

input:checked

Selects every checked <input> element

3

:disabled

input:disabled

Selects every disabled <input> element

3

:empty

p:empty

Selects every <p> element that has no children (including text nodes)

3

:enabled

input:enabled

Selects every enabled <input> element

3

:first-child

p:first-child

Selects every <p> element that is the first child of its parent

2

::first-letter

p::first-letter

Selects the first letter of every <p> element

1

::first-line

p::first-line

Selects the first line of every <p> element

1

:first-of-type

p:first-of-type

Selects every <p> element that is the first <p> element of its parent

3

:focus

input:focus

Selects the input element which has focus

2

:hover

a:hover

Selects links on mouse over

1

:in-range

input:in-range

Selects input elements with a value within a specified range

3

:invalid

input:invalid

Selects all input elements with an invalid value

3

:lang(language)

p:lang(it)

Selects every <p> element with a lang attribute equal to "it" (Italian)

2

:last-child

p:last-child

Selects every <p> element that is the last child of its parent

3

:last-of-type

p:last-of-type

Selects every <p> element that is the last <p> element of its parent

3

:link

a:link

Selects all unvisited links

1

:not(selector)

:not(p)

Selects every element that is not a <p> element

3

:nth-child(n)

p:nth-child(2)

Selects every <p> element that is the second child of its parent

3

: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

3

: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

3

:nth-of-type(n)

p:nth-of-type(2)

Selects every <p> element that is the second <p> element of its parent

3

:only-of-type

p:only-of-type

Selects every <p> element that is the only <p> element of its parent

3

:only-child

p:only-child

Selects every <p> element that is the only child of its parent

3

:optional

input:optional

Selects input elements with no "required" attribute

3

:out-of-range

input:out-of-range

Selects input elements with a value outside a specified range

3

:read-only

input:read-only

Selects input elements with the "readonly" attribute specified

3

:read-write

input:read-write

Selects input elements with the "readonly" attribute NOT specified

3

:required

input:required

Selects input elements with the "required" attribute specified

3

:root

:root

Selects the document's root element

3

::selection

::selection

Selects the portion of an element that is selected by a user

:target

#news:target

Selects the current active #news element (clicked on a URL containing that anchor name)

3

:valid

input:valid

Selects all input elements with a valid value

3

:visited

a:visited

Selects all visited links

1