{"id":97,"date":"2019-07-19T10:37:53","date_gmt":"2019-07-19T10:37:53","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=97"},"modified":"2019-09-03T11:52:36","modified_gmt":"2019-09-03T11:52:36","slug":"css-selectors","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/css-selectors\/","title":{"rendered":"CSS : Selectors"},"content":{"rendered":"\n

Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector diletakkan dalam tanda kurung kurawal. Tiap properti dan nilainya dipisahkan dengan tanda ; (titik koma). Kalian dapat menentukan selector dengan berbagai cara.<\/p>\n\n\n\n

Universal Selector <\/h4>\n\n\n\n

CSS Universal Selector<\/em> (*<\/code>) digunakan untuk menyeleksi setiap single element dari tipe element apapun. Artinya, penyeleksian berlaku secara keseluruhan untuk semua single element. Penggunaan Universal Selector<\/em> ditandai dengan karakter arterisk *<\/code> yang dapat digunakan secara berdiri sendiri ataupun digabungkan dengan tipe selektor lainnya. Berikut contoh kodenya:<\/p>\n\n\n

\n* {\n    margin: 0;\n    padding: 0;\n}\n<\/pre><\/div>\n\n\n
Aturan style di dalam selector * akan diterapkan ke setiap elemen dalam dokumen.<\/p>\n\n\n\n
Selector Elemen<\/h4>\n\n\n\n
Namanya memakai nama tag HTML, misalnya body, h1, img, dan seterusnya. Pendeklarasian aturannya cukup dengan menuliskan nama tag sebagai nama selector. Otomatis, elemen HTML terkait akan mengikuti aturan yang ditetapkan. Contohnya sebagai berikut:<\/p>\n\n\n
\np {\n    color: blue;\n}\n<\/pre><\/div>\n\n\n
Aturan gaya di dalam selector p akan diterapkan ke setiap elemen <p> dalam dokumen dan akan berwarna biru, terlepas dari posisinya di struktur dokumen.<\/p>\n\n\n\n
Id Selector<\/h4>\n\n\n\n
ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash<\/em>. Berikut contoh kodenya:<\/p>\n\n\n
\n#error {\n    color: red;\n}\n<\/pre><\/div>\n\n\n
Class Selector<\/h4>\n\n\n\n
Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector<\/em> akan \u2018mencari\u2019<\/em> seluruh tag yang memiliki atribut class <\/em>dengan nilai <\/em>yang sesuai. Nama selector diawali dengan simbol . (tanda titik). Berikut contoh kodenya:<\/p>\n\n\n
\n.blue {\n    color: blue;\n}\n<\/pre><\/div>\n\n\n
Aturan style di atas membuat semua teks di setiap elemen di dalam dokumen yang memiliki atribut class menjadi warna biru. Tetapi kalian bisa juga membuat hanya beberapa yang menjadi berwarna biru. Sebagai contoh:<\/p>\n\n\n
\np.blue {\n    color: blue;\n}\n<\/pre><\/div>\n\n\n
Selector Descendant<\/h4>\n\n\n\n
Descendant selector adalah selector yang bisa diatur secara khusus untuk sebuah ID atau CLASS (parent class atau parent ID) yang dibuat webmaster dalam pendefinisian suatu elemen. Berikut contohnya:<\/p>\n\n\n
\nul.menu li a {\n    text-decoration: none;\n}\nh1 em {\n    color: green;\n}\n<\/pre><\/div>\n\n\n
Child Selector<\/h4>\n\n\n\n
Child Selector adalah selector<\/em> di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML.<\/p>\n\n\n\n
Karena tag-tag HTML<\/strong> dapat berisi tag lain, maka struktur HTML dapat diibaratkan dengan \u2018pohon keluarga\u2019. <\/em>Dimana sebuah tag dapat disebut sebagai \u2018induk\u2019<\/em> dari tag lain, dan dapat juga disebut sebagai \u2018anak\u2019<\/em> dari tag lainnya. Istilah \u2018anak\u2019<\/em> inilah yang menjadi kata \u2018child\u2019<\/em> dalam Child Selector CSS<\/strong>.<\/p>\n\n\n\n
Kalian bisa menggunakan selector ini contohnya untuk memilih tingkat pertama dari daftar elemen di dalam daftar bersarang yang memiliki lebih dari satu tingkatan. Berikut contohnya:<\/p>\n\n\n
\nul > li {\n    list-style: square;\n}\nul > li ol {\n    list-style: none;\n}\n<\/pre><\/div>\n\n\n
Aturan style di dalam selector ul > li diterapkan hanya pada elemen <li> yang merupakan anak langsung dari elemen <ul>, dan tidak berpengaruh pada elemen daftar lainnya.<\/p>\n\n\n\n
Adjacent Sibling Selectors<\/h4>\n\n\n\n
Adjacent selector adalah fitur yang digunakan untuk memilih elemen yang berada tepat setelah elemen yang ditentukan atau berada langsung di bawahnya. Berikut ini adalah contoh penggunaan Adjacent Sibling Selector<\/em> untuk menyeleksi elemen <p><\/strong> yang berada langsung setelah elemen <div><\/strong> dengan warna merah. <\/p>\n\n\n
\n<!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv + p {\n    background-color: red;\n}\n<\/style>\n<\/head>\n<body>\n\n<div>\n  <p>Paragraf 1 yang berada di div.<\/p>\n  <p>Paragraf 2 yang berada di div.<\/p>\n<\/div>\n\n<p>Paragraf 3 yang tidak berada di div.<\/p>\n<p>Paragraf 4 yang tidak berada di div.<\/p>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
 General Sibling Selectors <\/h4>\n\n\n\n
Merupakan fitur yang memiliki konsep yang sama dengan adjacent selector, yang berbeda jika adjacent selector akan memilih 1 elemen saja setelah elemen yang ditentukan, general sibling selector akan memilih seluruh elemen yang berada setelah elemen yang ditentukan, untuk contoh perhatikan skrip dibawah ini:<\/p>\n\n\n
\n<!DOCTYPE html>\n<html>\n<head>\n\t<title><\/title>\n<\/head>\n<style type="text\/css">\n\tdiv ~ p \n\t{\n    \tbackground-color: salmon;\n\t}\n<\/style>\n<body>\n\t<div>\n\t\t<p>Paragraf 1<\/p>\n\t\t<p>Paragraf 2<\/p>\n\t\t<p>Paragraf 3<\/p>\n\t\t<span><p>Paragraf 4<\/p><\/span>\n\t<\/div>\n\t\t<p>Paragraf 5<\/p>\n\t\t<p>Paragraf 6<\/p>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Grouping Selectors <\/h4>\n\n\n\n
Merupakan gabungan beberapa selector dengan deklarasi aturan yang sama. Masing-masing selector dipisahkan dengan tanda koma. Berikut contoh kodenya:<\/p>\n\n\n
\nh1 {color: red;}\nh3 {color: red;}\n.kotak {color: red;}\n<\/pre><\/div>\n\n\n
Maka, kalian dapat meringkas kode dengan menggabungkan selectornya seperti berikut:<\/p>\n\n\n
\nh1, h3, .kotak {color: red;}\n<\/pre><\/div>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-97","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nBelajar CSS : Selectors - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/css-selectors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Selectors - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/css-selectors\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-19T10:37:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:52:36+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"CSS : Selectors\",\"datePublished\":\"2019-07-19T10:37:53+00:00\",\"dateModified\":\"2019-09-03T11:52:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/\"},\"wordCount\":568,\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/\",\"name\":\"Belajar CSS : Selectors - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-19T10:37:53+00:00\",\"dateModified\":\"2019-09-03T11:52:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-selectors\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS : Selectors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS : Selectors - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/css-selectors\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Selectors - WebHozz Code","og_description":"Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector","og_url":"https:\/\/www.webhozz.com\/code\/css-selectors\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-19T10:37:53+00:00","article_modified_time":"2019-09-03T11:52:36+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"CSS : Selectors","datePublished":"2019-07-19T10:37:53+00:00","dateModified":"2019-09-03T11:52:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/"},"wordCount":568,"articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/","url":"https:\/\/www.webhozz.com\/code\/css-selectors\/","name":"Belajar CSS : Selectors - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-19T10:37:53+00:00","dateModified":"2019-09-03T11:52:36+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/css-selectors\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/css-selectors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"CSS : Selectors"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":7,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/97\/revisions\/387"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}