Mengubah edit CSS turunan tanpa mempengaruhi yang lainnya
MENGUBAH CSS DENGAN ELEMEN UNIK TANPA MEMPENGARUHI ELEMEN LAINNYA
Anda dapat mengubah CSS hanya untuk elemen yang sesuai dengan selector "body .item-view" tanpa mempengaruhi elemen "body" secara keseluruhan. Ini dapat dicapai dengan menggunakan aturan CSS yang tepat. Berikut adalah cara melakukannya:
Misalnya, jika Anda ingin mengubah warna teks pada elemen "body .item-view" tanpa memengaruhi elemen "body" secara keseluruhan, Anda dapat menggunakan kode berikut:
css
color: red; /* Atur warna teks sesuai yang Anda inginkan */
}
Dalam contoh di atas, selector "body .item-view" akan memengaruhi elemen yang memiliki class "item-view" yang berada di bawah elemen "body" dalam struktur HTML. Ini berarti hanya elemen-elemen yang memiliki class "item-view" di dalam elemen "body" yang akan mengubah warna teks menjadi merah.
---
MENGATUR ELEMEN TERAKHIR DALAM CSS TURUNAN DENGAN KONTEKS
1.
Jika Anda ingin mengubah CSS untuk elemen ".Blog .blog-posts .post-outer-container:last-child" yang ada dalam konteks "body .item-view" tanpa memengaruhi "body" secara keseluruhan, Anda dapat menggunakan selector berurutan. Misalnya, jika Anda ingin mengubah warna latar belakang elemen tersebut, Anda dapat melakukannya sebagai berikut:
css
background-color: #ff0000; /* Ganti dengan warna latar belakang yang Anda inginkan */
}
Dengan menambahkan "body .item-view" sebelum ".Blog .blog-posts .post-outer-container:last-child", Anda membatasi aturan CSS ini hanya untuk elemen terakhir dari ".Blog .blog-posts .post-outer-container" yang berada dalam konteks "body .item-view". Ini tidak akan memengaruhi elemen "body" secara keseluruhan.
2.
Anda dapat menggunakan selector "body.item-view" untuk menggantikan "body .item-view" dalam CSS Anda ketika elemen `<body>` memiliki atribut class "item-view". Kedua cara ini akan menargetkan elemen `<body>` yang memiliki class "item-view" sebagai elemen dasar untuk seluruh styling yang Anda definisikan. Ini adalah contoh penggunaannya:
css
/* Properti CSS Anda di sini */
}
Dengan cara ini, Anda membatasi aturan CSS hanya untuk elemen `<body>` yang memiliki class "item-view" yang berada dalam konteks ".Blog .blog-posts .post-outer-container:last-child". Ini akan memengaruhi elemen tersebut tanpa memengaruhi elemen `<body>` secara keseluruhan, selama elemen `<body>` tersebut memiliki class "item-view".
---
MENYATUKAN BEBERAPA CSS TURUNAN DALAM SATU ATURAN DENGAN 'KOMA'
Anda dapat menyatukan aturan CSS untuk elemen dalam "body.item-view" yang memiliki aturan yang sama. Dalam contoh yang Anda berikan, di mana aturan CSS untuk elemen ".search" dan ".svg-icon-24-button" memiliki properti yang sama, Anda dapat menggabungkannya menjadi satu aturan seperti ini:
css
body.item-view .svg-icon-24-button {
display: none;
}
Dengan menggabungkan keduanya dalam satu aturan dengan menggunakan koma (`,`), Anda mengaplikasikan properti `display: none;` kepada kedua elemen `.search` dan `.svg-icon-24-button` yang berada dalam konteks "body.item-view". Ini akan membuat kode CSS Anda lebih bersih dan efisien.
---
##
PERBEDAAN PENULISAN ANTARA KEDUANYA
Perbedaan antara kedua penulisan CSS tersebut terletak pada selector dan cara mereka mempengaruhi elemen HTML.
1. `body .item-view .Blog .blog-posts .post-outer-container:last-child {}`
- Selector ini akan mencocokkan elemen terakhir yang memiliki class "post-outer-container" yang berada dalam elemen dengan class "blog-posts", yang berada dalam elemen dengan class "Blog", yang berada dalam elemen dengan class "item-view", yang berada dalam elemen `<body>`.
- Ini berarti elemen terakhir dengan class "post-outer-container" dalam konteks tersebut akan memenuhi aturan CSS yang Anda definisikan.
2. `body.item-view .Blog .blog-posts .post-outer-container:last-child {}`
- Selector ini akan mencocokkan elemen terakhir yang memiliki class "post-outer-container" yang berada dalam elemen dengan class "blog-posts", yang berada dalam elemen dengan class "Blog", yang berada dalam elemen dengan class "item-view", dan elemen tersebut juga harus memiliki class "body".
- Ini berarti elemen terakhir dengan class "post-outer-container" dalam konteks tersebut harus memenuhi semua kondisi yang disebutkan di atas, termasuk memiliki class "body".