Danh Sách Tất Cả Các Bộ Chọn (selector) Trong CSS - Web Cơ Bản

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS CSS Selectors (tất cả các bộ chọn trong CSS) Danh sách tất cả các bộ chọn (selector) trong CSS
Bộ chọn Ví dụ Mô tả ví dụ
.class .info

- Chọn tất cả các phần tử mà thuộc tính class của nó có chứa giá trị là .info

#id #progress

- Chọn phần tử có thuộc tính id với giá trị là progress

* *

- Chọn tất cả các phần tử trong trang web

element

-

element,element

-

element element

-

element>element

-

element+element

-

element1~element2

-

[attribute]

-

[attribute=value]

-

[attribute~=value]

-

[attribute|=value]

-

[attribute^=value]

-

[attribute$=value]

-

[attribute*=value]

-

:active a:active

- Chọn liên kết đang được người dùng nhấp vào

::after p::after

- Chọn phần nằm ngay sát phía sau nội dung bên trong các phần tử <p>

::before p::before

- Chọn phần nằm ngay sát phía trước nội dung bên trong các phần tử <p>

:checked input:checked

- Chọn tất cả các phần tử <input> được thiết lập thuộc tính checked

:disabled textarea:disabled

- Chọn tất cả các phần tử <textarea> được thiết lập thuộc tính disabled

:empty div:empty

- Chọn tất cả các phần tử <div> mà phần nội dung ở bên trong nó là rỗng

:enabled textarea:enabled

- Chọn tất cả các phần tử <textarea> không bị thiết lập thuộc tính disabled

:first-child p :first-child

- Chọn các phần tử nằm bên trong phần tử <p> với điều kiện các phần tử đó phải là phần tử con đầu tiên của cha nó

::first-letter p::first-letter

- Chọn ký tự đầu tiên bên trong các phần tử <p>

::first-line p::first-line

- Chọn dòng chữ đầu tiên bên trong các phần tử <p>

:first-of-type p:first-of-type

- Chọn tất cả những phần tử <p> với điều kiện nó phải là phần tử có kiểu <p> đầu tiên bên trong cha nó

:focus textarea:focus

- Chọn phần tử <textarea> đang được người dùng truy cập vào

:hover a:hover

- Chọn liên kết đang bị người dùng dí chuột vào

:in-range input:in-range

- Chọn các phần tử <input> có giá trị nằm trong phạm vi cho phép

:invalid input:invalid

- Chọn tất cả các phần tử <input> mà giá trị của nó là không hợp lệ

:last-child p :last-child

- Chọn các phần tử nằm bên trong phần tử <p> với điều kiện các phần tử đó phải là phần tử con cuối cùng của cha nó

:last-of-type p:last-of-type

- Chọn tất cả những phần tử <p> với điều kiện nó phải là phần tử có kiểu <p> cuối cùng bên trong cha nó

:link a:link

- Chọn tất cả các liên kết chưa được viếng thăm

:not(selector) :not(p)

- Chọn tất cả các phần tử không phải là phần tử <p>

:nth-child(n) :nth-child(3)

- Chọn tất cả các phần tử là phần tử con thứ ba của cha nó

:nth-last-child(n) :nth-last-child(3)

- Chọn tất cả các phần tử là phần tử con thứ ba (xác định theo chiều từ dưới lên) của cha nó

:nth-last-of-type(n) p:nth-last-of-type(3)

- Chọn những phần tử <p> là phần tử có kiểu <p> thứ ba theo chiều từ dưới lên bên trong cha nó

:nth-of-type(n) p:nth-of-type(3)

- Chọn những phần tử <p> là phần tử có kiểu <p> thứ ba bên trong cha nó

:only-of-type p:only-of-type

- Chọn những phần tử <p> là phần tử có kiểu <p> duy nhất bên trong cha nó

:only-child body :only-child

- Chọn tất cả những phần tử bên trong <body> với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó.

:optional textarea:optional

- Chọn các phần tử <textarea> không có thiết lập thuộc tính required

:out-of-range input:out-of-range

- Chọn các phần tử <input> có giá trị nằm ngoài phạm vi cho phép

:required textarea:required

- Chọn các phần tử <textarea> có thiết lập thuộc tính required

:root :root

- Chọn phần tử gốc trong trang web

::selection ::selection

- Chọn phần văn bản đang được người dùng bôi đen

:target

-

:valid input:valid

- Chọn tất cả các phần tử <input> mà giá trị của nó là hợp lệ

:visited a:visited

- Chọn tất cả các liên kết đã được viếng thăm

Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

Từ khóa » Các Bộ Chọn Trong Css