CSS Selector Learning Part 2
Photo By Safar Safarov on Unsplash
After understanding the basics of CSS in the previous chapter, it turns out that CSS Selectors are not only limited to tags, IDs, and classes. We also discussed this in *Advanced CSS Selectors Part l*LINK B inggris 1. To complete our understanding of CSS Selectors, let’s continue with CSS Selector Learning Part 1 and pay attention to the explanation table below:
| Selector | Contoh | Deskripsi Contoh | Versi CSS |
|---|---|---|---|
| .[attribute] | [target] | Menyeleksi elemen yang memiliki attribute “target” | 2 |
| [attribute=value] | [target=_blank] | Menyeleksi elemen yang memiliki attribut target=”_blank” | 2 |
| [attribute~=value] | [title~=css] | Menyeleksi elemen yang memiliki attribut title yang mengandung kata “css” | 2 |
| [attribute|=value] | [lang|=en] | Menyeleksi elemen yang memiliki attribut lang yang memiliki value dengan awalan “en”.
catatan : berlaku jika value terdiri dari satu kata atau secara keseluruhan kata utamanya terdiri dari kata tersebut dan dihubungkan dengan – |
2 |
| [attribute^=value] | a[href^=”https”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya dimulai dengan “https” | 3 |
| [attribute$=value] | a[href$=”.pdf”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya diakhiri dengan “.pdf” | 3 |
| [attribute*=value] | a[href*=”css”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya mengandung huruf “css” | 3 |
Take a look at the example below:
In the example above, we can see that all elements are created using the <a> tag, but only link 1, link 3, and link 5 have the target attribute. So, we can style them directly using the attribute selector [target].
If we want to be more specific, targeting only attributes with a particular value, we can use [attribute=value]. (Refer back to the example above where we applied it to link 3 using [target=”_self”].)
More Attribute Examples:
Please observe and study the example above. If there is anything unclear, feel free to send your questions in the comment section. For other cases listed in the table above, please try them out on your own, friends.
Keep Learning and Good Luck ^_^, Stay Motivated!
That is the end of the CSS Selector Learning Part 2 article that Mangcoding can share. Hopefully, this article is useful and provides you with new knowledge. If you have any constructive criticism or suggestions, please leave a comment or send them via Emailemail or Media sosialMangcoding’s social media.