• Thống kê tình hình
    Covid-19
    Thế giới
    • 239,254,005Ca nhiễm
    • 4,878,691Tử vong
    • 0Khỏi bệnh
    Việt Nam
    • 853,842Ca nhiễm
    • 20,950Tử vong
    • 0Khỏi bệnh
    Phát triển bởi ❤ Fuvavi.com
  • CSS Selector là gì? Những cách viết CSS có thể bạn chưa biết.

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

    701 lượt xem
    CHIA SẺ

    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ở <tag> và thẻ đóng </tag>  ngoại trừ các thẻ không có thẻ đóng như <img/> , <input />  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.

    CSS Selector là gì

    Khi bắt tay vào học Frontend thì các bạn phải nắm rõ các 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 giản CSS Selector là cho phép bạn nhắm tới các phần tử HTML để áp dụng các 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 phù hợp với tất cả các selector là con của một selectorđược chỉ định.

    Ví dụ sau chọn tất cả các thẻ <p> bên trong các thẻ <div>:

    div p {
        background-color: yellow;
    }
    
    

    CSS Selector cha con

    Quan hệ con chọn tất cả các phần tử là các 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ẻ <p> là các phần tử con ruột của phần tử <div>:

     

    div > p {
        background-color: yellow;
    }
    
    

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

    Quan hệ anh chị em liền kề chọn tất cả các 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ẻ <p> được đặt ngay sau các thẻ <div>:

     

    div + p {
        background-color: yellow;
    }
    
    

    CSS Selector anh chị em

    Quan hệ anh chị em là tất cả các 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ẻ <p> là anh em ruột của thẻ <div> miễn là <p> đứng sau <div>:

    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é:

     

    SelectorVí dụMô tả
    .class.introChọn tất cả các thẻ có class=”intro”
    .class1.class2.name1.name2Chọn tất cả các thẻ có class name1name2
    .class1 .class2.name1 .name2Chọn tất cả các thẻ có class name2 là con của thẻ có class name1
    #id#firstnameChọn tất cả các thẻ có id=”firstname”
    **Chọn tất cả
    elementpChọn tất cả thẻ <p>
    element.classp.introChọn tất cả các thẻ <p> có class=”intro”
    element,elementdiv, pChọn tất cả các thẻ <div> và tất cả các thẻ <p>
    element elementdiv pChọn tất cả các thẻ <p> là con của thẻ <div>
    element>elementdiv > pChọn tất cả các thẻ <p> elements where the parent is a <div> element
    element+elementdiv + pChọn tất cả các thẻ <p> elements that are placed immediately after <div> elements
    element1~element2p ~ ulChọn tất cả các thẻ <ul> xuất hiện phía sau thẻ <p>
    [attribute][target]Chọn tất cả các thẻ có thuộc tính target ví dụ như thẻ <a>
    [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ẻ <a> có giá trị bắt đầu là “https”
    [attribute$=value]a[href$=”.pdf”]Chọn những thẻ <a> có giá trị thuộc tính href kết thúc là “.pdf”
    [attribute*=value]a[href*=”fuvavi”]Chọn những thẻ <a> có thuộc tính href chứa từ “fuvavi”
    :activea:activeChọn những thẻ a active
    ::afterp::afterChèn thêm gì đó vào phía sau thẻ <p>
    ::beforep::beforeChèn thêm gì đó vào phía trước thẻ <p>
    :checkedinput:checkedChọn những thẻ <input> đã check
    :defaultinput:defaultChọn những thẻ <input> mặc định
    :disabledinput:disabledChọn những thẻ <input> bị disabled (vô hiệu hóa)
    :emptyp:emptyChọn những thẻ <p> trống không có text hoặc thẻ con bên trong
    :enabledinput:enabledChọn những thẻ  <input> không bị vô hiệu hóa
    :first-childp:first-childChọn những thẻ <p> đầu tiên ở bất kỳ vị trí nào. ()
    ::first-letterp::first-letterChọn ký tự đầu tiên của thẻ <p>
    ::first-linep::first-lineChọn dòng đầu tiên của thẻ <p>
    :first-of-typep:first-of-typeTương tự :first-child :first-of-type cũng chọn những thẻ <p> đầu tiên trong danh sách những thẻ <p>.
    :focusinput:focusChọn những thẻ <input> đang focus
    :hovera:hoverChọn những thẻ <a> đang rê chuột
    :in-rangeinput:in-rangeChọn những thẻ <input> có giá trị trong phạm vi min – max
    :indeterminateinput:indeterminateChọn những thẻ <input> có giá trị chưa xác định
    :invalidinput:invalidChọn những thẻ <input> có giá trị không hợp lệ
    :lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)
    :last-childp:last-childSelects every <p> element that is the last child of its parent
    :last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
    :linka:linkChọn tất cả các thẻ 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-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
    :only-childp:only-childSelects every <p> element that is the only child of its parent
    :optionalinput:optionalSelects input elements with no “required” attribute
    :out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
    ::placeholderinput::placeholderSelects input elements with the “placeholder” attribute specified
    :read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified
    :read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified
    :requiredinput:requiredSelects input elements with the “required” attribute specified
    :root:rootSelects the document’s root element
    ::selection::selectionSelects the portion of an element that is selected by a user
    :target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
    :validinput:validChọn tất cả các thẻ input elements with a valid value
    :visiteda:visitedChọn tất cả các thẻ visited links

     

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



    Chia sẻ

    Theo dõi
    Thông báo cho
    guest
    0 Comments
    Inline Feedbacks
    View all comments

    Tiếp theo

    Vì sao cần reset CSS khi bắt đầu một project

    Vì sao cần reset CSS khi bắt đầu một project

    3005 lượt xem
    3 năm trước
    Share plugin trang trí noel cho website wordpress

    Share plugin trang trí noel cho website wordpress

    4381 lượt xem
    3 năm trước
    Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

    Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

    17803 lượt xem
    4 năm trước
    Tổng hợp các thuộc tính cho text trong css

    Tổng hợp các thuộc tính cho text trong css

    5273 lượt xem
    4 năm trước
    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    12125 lượt xem
    4 năm trước
    Xem thêm
    0
    Would love your thoughts, please comment.x
    ()
    x