Cara menggunakan css not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Table of Contents Show

Video Tutorial Belajar CSS – Cara Penulisan Selector CSS
Style CSS apa saja?
Bagaimana cara kerja CSS?
Apa itu CSS markup?
Bagaimana membuat komentar di CSS?

The :not() pseudo-class has a number of that you should be aware of before using it.

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

:not( <complex-selector-list> )

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

Jika dalam tutorial sebelumnya kita telah belajar mengenai beberapa jenis dari selector CSS, seperti Universal Selector, Element Type Selector, Class Selector, ID Selector, dan Attribute Selector yang merupakan selector yang sering digunakan untuk memanipulasi tampilan kode html, nah dalam tutorial kali ini kita akan membahas mengenai bagaimana cara menggunakan beberapa selector secara bersamaan agar struktur html yang akan kita beri css bisa lebih spesifik.

Video Tutorial Belajar CSS – Cara Penulisan Selector CSS

Dalam tutorial sebelumnya memang kita telah belajar beberapa contoh dari penggunaan selector, tetapi hanya menggunakan satu selector saja, dalam contoh ini kita akan menggabungkan beberapa selector menjadi satu, baik langsung saja perhatikan contoh skrip HTML dibawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Selector CSS</title>

</head>

<body>

<h2 class="judul">Belajar CSS Mudah di <a href="https://warungbelajar.com">Warung Belajar</a></h2>

<p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p>

<p id="warungbelajar"> <a href="https://www.warungbelajar.com">Warung Belajar</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p>

<p class="penjelas">beberapa materinya antara lain :</p>

<h3>Materi HTML</h3>

<tr>

<th>Pembahasan</th>

</tr>

<tr>

<td>Belajar HTML Part 1 Mengenal HTML</td>

</tr>

<tr>

<td>Belajar HTML Part 2 Membuat File HTML</td>

</tr>

<tr>

<td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td>

</tr>

</table>

<h3>Materi CSS</h3>

<tr>

<th>Pembahasan</th>

</tr>

<tr>

<td>Belajar CSS Part 1 Mengenal Fungsi CSS</td>

</tr>

<tr>

<td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td>

</tr>

<tr>

<td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td>

</tr>

</table>

</body>

</html>

dalam skrip diatas telah ada skrip html, beberapa bagian dari struktur html tersebut akan kita beri skrip CSS dengan mode internal style, baik kita akan buat beberapa contoh penggunaan dari selector css :

Tag h2 dan h3 menjadi warna biru

Anda bisa menuliskan selectornya satu persatu seperti berikut ini :

{

color:blue;

}

{

color:blue;

}

tetapi karena property dan value sama, sehingga anda bisa menuliskan seperti berikut ini :

h2,h3

{

color:blue;

}

Tag <strong> pada tag <p>

pada paragraf pertama, terdapat tag <strong> yang mengapit tulisan CSS, itu akan kita rubah ukuran fontnya menjadi 20px, maka skrip cssnya adalah seperti berikut ini :

p strong

{

font-size:20px;

}

selector yang kita tulis adalah tag selector p dan strong

Tag <em> pada tag <p>

pada paragraf pertama terdapat tag <em> kita akan merubah warna textnya menjadi merah, maka skrip cssnya adalah :

p em

{

color:red;

}

selector yang kita tulis adalah tag p dan em

Text dengan menggunakan ID warungbelajar pada tag <p>

pada paragraf kedua kita menggunakan attribute id dengan value warungbelajar kita akan merubah warnanya menjadi warna merah, maka skrip cssnya adalah :

p#warungbelajar

{

color:red;

}

selector yang kita gunakan adalah tag selector p dan id selector “warungbelajar”

Text dengan menggunakan class penjelas pada tag <p>

pada paragraf ketiga yang menggunakan class=”penjelas” kita akan merubah warnya menjadi warna hijau

p.penjelas

{

color:green;

}

selector yang kita gunakan adalah tag selector p dan class selector “penjelas”

Attribute [href] pada paragraf kedua

Kita akan merubah warna link, pada paragraf kedua, maka kita gunakan perpaduan attribute selector, id selector dan tag p, skrip cssnya sebagai berikut :

p#warungbelajar [href]

{

color:orange;

}

selectorny yang digunakan adalah tag selector p, id selector “warungbelajar” dan attribute selector [href], jika anda hanya menggunakan attribute selector saja, seperti ini :

[href]

{

color:orange;

}

maka link yang berada di tag <h2> juga akan berubah, karena itu gunakan beberapa selector agar menjadi lebih spesifik untuk href yang akan kita rubah warnanya.

Table dengan ID daftar_html

kita akan merubah warna background pada tabel yang menggunakan id=”daftar_html”, maka skrip cssnya sebagai berikut :

table#daftar_html

{

background-color:#ccc;

}

selector yang kita gunakan adalah tag selector table dan id selector “daftar_html”.

Nah sudah ada beberapa contoh penggabungan selector css untuk merubah tag HTML, ini adalah keseluruhan kode HTML dan cssnya, untuk css kita menggunakan mode internal

<!DOCTYPE html>

<html>

<head>

<title>Belajar CSS</title>

h2,h3

{

color:blue;

}

p strong

{

font-size:20px;

}

p em

{

color:red;

}

p#warungbelajar

{

color:red;

}

p.penjelas

{

color:green;

}

p#warungbelajar [href]

{

color:orange;

}

table#daftar_html

{

background-color:#ccc;

}

</style>

</head>

<body>

<h2 class="judul">Belajar CSS Itu Mudah di <a href="https://warungbelajar.com">Warung Belajar</a></h2>

<p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p>

<p id="warungbelajar"> <a href="https://www.warungbelajar.com">Warung Belajar</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p>

<p class="penjelas">beberapa materinya antara lain :</p>

<h3>Materi HTML</h3>

<tr>

<th>Pembahasan</th>

</tr>

<tr>

<td>Belajar HTML Part 1 Mengenal HTML</td>

</tr>

<tr>

<td>Belajar HTML Part 2 Membuat File HTML</td>

</tr>

<tr>

<td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td>

</tr>

</table>

<h3>Materi CSS</h3>

<tr>

<th>Pembahasan</th>

</tr>

<tr>

<td>Belajar CSS Part 1 Mengenal Fungsi CSS</td>

</tr>

<tr>

<td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td>

</tr>

<tr>

<td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td>

</tr>

</table>

</body>

</html>

semisal kita beri nama cara_penulisan_selector_css.html lalu kita buka di browser :

Bagimana mudah bukan cara menggabungkan beberapa selector CSS, dengan cara ini anda sudah bisa memilih struktur HTML mana yang ingin dirubah dengan lebih spesifik, baik sekian dulu yang dapat warung belajar bahas dalam tutorial cara penulisan selector CSS, sampai jumpa di tutorial CSS lainnya.

Style CSS apa saja?

Terdapat tiga macam style CSS, yaitu Inline CSS, External CSS, dan Internal CSS. Berikut adalah penjelasan lengkapnya!

Bagaimana cara kerja CSS?

Cara kerja CSS CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs.

Apa itu CSS markup?

CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML. Apakah kamu bingung dengan penjelasan teknis ini? Intinya, CSS merupakan tools pelengkap HTML yang digunakan untuk mengubah tampilan suatu situs.

Bagaimana membuat komentar di CSS?

Penulisan komentar pada CSS untuk satu baris dilakukan dengan menambahkan tanda double slash "//". Namun jika untuk beberapa baris dapat menggunakan tanda notasi slash dan asteric "/*" sebagai pembuka komentar. Dan untuk menutup komentar digunakan notasi asteric dan slash "*/".