CSS Selector là gì? Những cách viết CSS có thể bạn chưa biết.

Trước khi  tìm hiểu khái niệm CSS Selector là gì thì mình muốn nhắc lại kiến thức về HTML và CSS một chút. Như bạn đã biết các thẻ HTML thường sẽ có thẻ mở  và thẻ đóng 

 ngoại trừ các thẻ không có thẻ đóng như ,   bên trong thẻ đó có thể có nhiều thẻ khác nữa. Vậy ta sẽ gọi thẻ tag đó là thẻ cha và các thẻ nằm bên trong nó là thẻ con.Khi bắt tay vào học Frontend thì những bạn phải nắm rõ những khái niệm về css trong đó có khái niệm CSS Selector mà bạn cần phải học thuộc lòng. CSS Selector là một bộ chọn để style cho website. Hiểu đơn thuần CSS Selector là được cho phép bạn nhắm tới những thành phần HTML để vận dụng những thuộc tính CSS cho chúng .

CSS Selector là gì

CSS Selector có thể chứa nhiều selector đơn giản. Giữa các selector đơn giản, chúng ta có thể bao gồm một selector kết hợp.

Có bốn bộ phối hợp khác nhau trong CSS :

  • Bộ chọn con cháu (cách nhau bởi khoảng trắng)
  • Bộ chọn con (>)
  • Bộ chọn anh chị em liền kề (+)
  • Bộ chọn anh chị em chung (~)

CSS Selector “con cháu”

Quan hệ con cháu tương thích với toàn bộ những selector là con của một selectorđược chỉ định .

Ví dụ sau chọn tất cả các thẻ

bên trong các thẻ

:

div p {
    background-color: yellow;
}

CSS Selector cha con

Quan hệ con chọn toàn bộ những thành phần là những selector con ngay lập tức của một selector được chỉ định .

Ví dụ sau chọn tất cả các thẻ

là các phần tử con ruột của phần tử

:

div > p {
    background-color: yellow;
}

CSS Selector anh chị em liền kề.

Quan hệ anh chị em liền kề chọn tổng thể những selector đứng gần nhất với một selector được chỉ định .

Ví dụ sau chọn tất cả các thẻ

được đặt ngay sau các thẻ

:

div + p {
    background-color: yellow;
}

CSS Selector anh chị em

Quan hệ anh chị em là tổng thể những selector được chọn đứng sau và phải đứng cùng cấp với selector được chỉ định .

Ví dụ sau đây chọn tất cả các thẻ

là anh em ruột của thẻ

miễn là

đứng sau

:

Ngoài ra còn có các cách viết css selector khác bạn tham khảo bảng sau nhé:

Selector Ví dụ Mô tả
.class .intro Chọn tất cả các thẻ có class=”intro”
.class1.class2 .name1.name2 Chọn tất cả các thẻ có class name1 và name2
.class1 .class2 .name1 .name2 Chọn tất cả các thẻ có class name2 là con của thẻ có class name1
#id #firstname Chọn tất cả các thẻ có id=”firstname”
* * Chọn tất cả
element p Chọn tất cả thẻ
element.class p.intro Chọn tất cả các thẻ có class = ” intro ”
element,element div, p Chọn tất cả các thẻ

và tất cả các thẻ
element element div p Chọn tất cả các thẻ

là con của thẻ

element>element div > p Chọn tất cả các thẻ

elements where the parent is a

element
element+element div + p Chọn tất cả các thẻ

elements that are placed immediately after

elements

element1~element2 p ~ ul Chọn tất cả các thẻ

    xuất hiện phía sau thẻ
[attribute] [target] Chọn tất cả các thẻ có thuộc tính target ví dụ như thẻ
[attribute=value] [target=_blank] Chọn tất cả các thẻ có target=”_blank”
[attribute~=value] [title~=flower] Chọn tất cả các thẻ có thuộc tính title chứa từ “flower”
[attribute|=value] [lang|=en] Chọn tất cả các thẻ có thuộc tính lang bắt đầu bằng “en”
[attribute^=value] a[href^=”https”] Chọn những thẻ có giá trị bắt đầu là “https”
[attribute$=value] a[href$=”.pdf”] Chọn những thẻ có giá trị thuộc tính href kết thúc là “.pdf”
[attribute*=value] a[href*=”fuvavi”] Chọn những thẻ có thuộc tính href chứa từ “fuvavi”
:active a:active Chọn những thẻ a active
::after p::after Chèn thêm gì đó vào phía sau thẻ
::before p::before Chèn thêm gì đó vào phía trước thẻ
:checked input:checked Chọn những thẻ đã check
:default input:default Chọn những thẻ mặc định
:disabled input:disabled Chọn những thẻ bị disabled (vô hiệu hóa)
:empty p:empty Chọn những thẻ trống không có text hoặc thẻ con bên trong
:enabled input:enabled Chọn những thẻ  không bị vô hiệu hóa
:first-child p:first-child Chọn những thẻ tiên phong ở bất kể vị trí nào. ( )
::first-letter p::first-letter Chọn ký tự đầu tiên của thẻ
::first-line p::first-line Chọn dòng đầu tiên của thẻ
:first-of-type p:first-of-type Tương tự :first-child :first-of-type cũng chọn những thẻ

đầu tiên trong danh sách những thẻ .

:focus input:focus Chọn những thẻ đang focus
:hover a:hover Chọn những thẻ đang rê chuột
:in-range input:in-range Chọn những thẻ có giá trị trong phạm vi min – max
:indeterminate input:indeterminate Chọn những thẻ có giá trị chưa xác định
:invalid input:invalid Chọn những thẻ có giá trị không hợp lệ
:lang(language) p:lang(it) Selects every element with a lang attribute equal to “ it ” ( Italian )
:last-child p:last-child Selects every element that is the last child of its parent
:last-of-type p:last-of-type Selects every

element that is the last element of its parent

:link a:link Chọn tất cả các thẻ unvisited links
:not(selector) :not(p) Selects every element that is not a element
:nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every 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

element that is the second element of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every

element that is the second element of its parent

:only-of-type p:only-of-type Selects every

element that is the only

element of its parent

:only-child p:only-child Selects every 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
::placeholder input::placeholder Selects input elements with the “placeholder” attribute specified
:read-only input:read-only Selects input elements with the “readonly” attribute specified
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
:required input:required Selects input elements with the “required” attribute specified
:root :root Selects the document’s root element
::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)
:valid input:valid Chọn tất cả các thẻ input elements with a valid value
:visited a:visited Chọn tất cả các thẻ visited links

Hi vọng bài viết này sẽ giúp những bạn hiểu rõ hơn về CSS Selector là gì ? Nếu muốn mình san sẻ thêm kiến thức và kỹ năng gì hãy để lại phản hồi bên dưới nhé. Cảm ơn bạn đã xem hết bài viết này .