Advanced CSS Selectors Part 1
Photo By Pankaj PatelPankaj Patel on Unsplash
Advanced CSS Selector is a technique in CSS used to select HTML elements more specifically and complexly, allowing styles to be applied as needed.As we have learned before, CSS Selectors are used to select HTML elements to which we want to apply styles.
The table below is referenced from W3Schools/cssref. If you have sufficient English skills, I recommend checking the original source. To understand more details about CSS Selectors, please read this article to the end or you can directly visit this page: w3schools/trial.
| Selector | Contoh | Deskripsi Contoh | Versi CSS |
|---|---|---|---|
| .class | .intro | Menyeleksi semua elemen yang memiliki class=”intro” | 1 |
| #id | #firstname | Menyeleksi elemen yang memiliki id=”firstname” | 1 |
| * | * | Menyeleksi Semua Elemen | 2 |
| element/tag | p | Menyeleksi semua elemen p(paragraf) | 1 |
| element,element (pisahkan dengan koma) | div, p | Menyeleksi semua elemen div dan p | 1 |
| element element | div p | Menyelesi semua elemen <p> yang ada didalam elemen <div> | 1 |
| element>element | div > p | Menyeleksi semua elemen <p> yang berada 1 tingkat dari elemen <div>. pada dasarnya hampir mirip dengan yang div p, namun dikhususkan untuk elemen yang berada 1 tingkat didalamnya tanpa terhalang elemen lain | 2 |
| element+element | div + p | Menyeleksi elemen <p> yang ditempatkan langsung setelah elemen <div> | 2 |
| element1~element2 | p ~ ul | Menyeleksi semua elemen <ul> yang secara hirarki sejajar dengan elemen <p> | 3 |
To better understand all the examples above, please check out the example below.
That’s all for today’s material. We will discuss the next part of CSS Selectors in the upcoming article. Keep checking this blog regularly, friends! Hopefully, you stay motivated to keep learning CSS.
This is the article that Mangcoding can share. Hopefully, it’s useful and can give you new insights. If you have any constructive feedback or suggestions, please leave a comment or send them via Email or Media sosial Mangcoding’s social media.
Keep Learning ^_^