From c515b783c9c6d650bf8e4c5a581d5175de3a5efb Mon Sep 17 00:00:00 2001 From: naufalf25 Date: Tue, 6 Sep 2022 15:26:17 +0700 Subject: [PATCH 1/2] Create README.md --- CSS/032 CSS Attribute Selectors/README.md | 111 ++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 CSS/032 CSS Attribute Selectors/README.md diff --git a/CSS/032 CSS Attribute Selectors/README.md b/CSS/032 CSS Attribute Selectors/README.md new file mode 100644 index 00000000..62d6a6e4 --- /dev/null +++ b/CSS/032 CSS Attribute Selectors/README.md @@ -0,0 +1,111 @@ +# CSS Attribute Selectors + +## Apa itu CSS Attribute Selectors + +CSS `Attribute` Selectors merupakan cara yang digunakan untuk memilih elemen HTML yang ingin diberikan style berdasarkan keberadaan atau nilai `attribute` tertentu. + +Ada beberapa jenis CSS `Attribute` Selectors yang bisa digunakan, diantaranya sebagai berikut: + +- `[attribute]` +- `[attribute="value"]` +- `[attribute~="value"]` +- `[attribute|="value"]` +- `[attribute^="value"]` +- `[attribute$="value"]` +- `[attribute*="value"]` + + +## Macam - macam CSS Attribute Selector + +### CSS `[attribute]` Selector + +`[attribute]` selector digunakan untuk memilih elemen HTML dengan `attribute` tertentu. + +Berikut adalah contoh untuk memilih seluruh elemen `` dengan `attribute` `[target]`: +```css +a[target] { + background-color: cyan; +} +``` + + +### CSS `[attribute="value"]` Selector + +`[attribute="value"]` selector digunakan untuk memilih elemen HTML dengan `attribute` dan `value` tertentu. + +Berikut adalah contoh untuk memilih seluruh elemen `` dengan `attribute` `[target="_blank"]`: +```css +a[target="_blank"] { + background-color: red; +} +``` + + +### CSS `[attribute~="value"]` Selector + +`[attribute~="value"]` selector digunakan untuk memilih elemen HTML dengan `value` `attribute` yang mengandung kata tertentu. + +Berikut adalah contoh untuk memilih seluruh elemen dengan `attribute` `title` yang berisi daftar kata yang dipisahkan oleh spasi, salah satunya adalah `flower`: +```css +[title~="flower"] { + border: 2px solid yellow; +} +``` + +Contoh diatas akan mencocokkan elemen dengan `title="flower"`, `title="summer flower"`, `title="flower new"`, tapi tidak akan mencocokkan elemen dengan `title="my-flower"` atau `title="flowers"`. + + +### CSS `[attribute|="value"]` Selector + +`[attribute|="value"]` selector digunakan untuk memilih elemen HTML dengan `attribute` tertentu, yang `value`nya bisa sama persis dengan `value` yang ditentukan, atau `value` yang ditentukan tersebut diikuti oleh tanda hubung `(-)`. + +**Catatan**: `value` harus berupa keseluruhan kata, baik individu seperti `class="top"`, atau diikuti oleh tanda hubung `(-)` seperti `class="top-next"`. + +Berikut adalah contohnya: +```css +[class|="top"] { + background: green; +} +``` + + +### CSS `[attribute^="value"]` Selector + +`[attribute^="value"]` selector digunakan untuk memilih elemen HTML dengan `attribute` tertentu, yang `value`nya dimulai dengan `value` yang ditentukan. + +Berikut adalah contoh untuk memilih seluruh elemen dengan `value` yang dimulai dengan kata `"top"` untuk `attribute` `class`nya: + +**Catatan**: `value` tidak harus berupa keseluruhan kata. +```css +[class^="top"] { + background: green; +} +``` + + +### CSS `[attribute$="value"]` Selector + +`[attribute$="value"]` selector digunakan untuk memilih elemen HTML yang `value` `attribute`nya diakhiri dengan `value` tertentu. + +Berikut adalah contoh untuk memilih seluruh elemen dengan `value` yang diakhiri dengan kata `"test"` untuk `attribute` `class`nya: + +**Catatan**: `value` tidak harus berupa keseluruhan kata. +```css +[class$="test"] { + background: yellow; +} +``` + + +### CSS `[attribute*="value"]` Selector + +`[attribute*="value"]` selector digunakan untuk memilih elemen HTML yang `value` `attribute`nya berisi `value` tertentu. + +Berikut adalah contoh untuk memilih seluru elemen dengan `value` yang mengandung kata `"te"` untuk `attribute` `class`nya: + +**Catatan**: `value` tidak harus berupa keseluruhan kata. +```css +[class*="te"] { + background: blue; +} +``` \ No newline at end of file From c2e07e164931e1bcf7e4374d8ce6a81d527e119a Mon Sep 17 00:00:00 2001 From: Dhafit Farenza <87353624+dhafitf@users.noreply.github.com> Date: Thu, 29 Sep 2022 21:17:45 +0700 Subject: [PATCH 2/2] feat: memperbaiki sedikit typo --- CSS/032 CSS Attribute Selectors/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CSS/032 CSS Attribute Selectors/README.md b/CSS/032 CSS Attribute Selectors/README.md index 62d6a6e4..3fd3ca15 100644 --- a/CSS/032 CSS Attribute Selectors/README.md +++ b/CSS/032 CSS Attribute Selectors/README.md @@ -52,7 +52,7 @@ Berikut adalah contoh untuk memilih seluruh elemen dengan `attribute` `title` ya } ``` -Contoh diatas akan mencocokkan elemen dengan `title="flower"`, `title="summer flower"`, `title="flower new"`, tapi tidak akan mencocokkan elemen dengan `title="my-flower"` atau `title="flowers"`. +Contoh di atas akan mencocokkan elemen dengan `title="flower"`, `title="summer flower"`, `title="flower new"`, tapi tidak akan mencocokkan elemen dengan `title="my-flower"` atau `title="flowers"`. ### CSS `[attribute|="value"]` Selector @@ -101,11 +101,11 @@ Berikut adalah contoh untuk memilih seluruh elemen dengan `value` yang diakhiri `[attribute*="value"]` selector digunakan untuk memilih elemen HTML yang `value` `attribute`nya berisi `value` tertentu. -Berikut adalah contoh untuk memilih seluru elemen dengan `value` yang mengandung kata `"te"` untuk `attribute` `class`nya: +Berikut adalah contoh untuk memilih seluruh elemen dengan `value` yang mengandung kata `"te"` untuk `attribute` `class`nya: **Catatan**: `value` tidak harus berupa keseluruhan kata. ```css [class*="te"] { background: blue; } -``` \ No newline at end of file +```