{"id":3213,"date":"2016-08-26T20:59:08","date_gmt":"2016-08-26T20:59:08","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=3213"},"modified":"2019-06-27T07:46:46","modified_gmt":"2019-06-27T07:46:46","slug":"css-selector","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/css-selector\/","title":{"rendered":"CSS Selector"},"content":{"rendered":"<p>Pada dasarnya ketika kita akan memulai menggunakan CSS ada baiknya kita mengerti apa itu selector, adapun tujuan penggunaan selector adalah untuk memilih element\/ag html untuk diatur propertiesnya di css .<br \/>\nCss memiliki 3 jenis selector ,selector basic yaitu class selector, id selector,dan tag selector.<br \/>\nbaik kita mulai saja <\/p>\n<p><!--more--><\/p>\n<p>a.Class Selector.<br \/>\nClass adalah &#8220;agen bebas&#8221; yang dapat diterapkan untuk tag HTML apapun,Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus,maka class adalah selector yang paling serbaguna. Penulisan  class selector dalam CSS disimbolkan dengan tanda titik(.).<br \/>\nContoh:Penulisan code didalam dokumen HTML.<br \/>\nPenulisan kode di html<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;h3 class='judul'&gt;\r\nwww.webhozz.com\r\n<\/pre>\n<p>Penulisan kode di CSS<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.judul{\r\ncolor:red;\r\n}\r\n<\/pre>\n<p>keterangan:<br \/>\nSelector Class dapat digunakan pada lebih dari satu tag HTML, masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen\/tag HTML yang bisa memiliki style yang sama dalam satu halaman.<\/p>\n<p>b. ID Selector<br \/>\nHampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.Penulisan  ID selector dalam CSS disimbolkan dengan tanda pagar(#).<br \/>\ncontoh:<br \/>\npenulisan kode pada html<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id='header'&gt;\r\n<\/pre>\n<p>Penulisan pada CSS<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#header{\r\ncolor:blue;\r\n}\r\n<\/pre>\n<p>keterangan: Selector ID hanya digunakan untuk 1 element\/tag pada satu halaman web.<\/p>\n<p>c. Tag selector<br \/>\nNama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. tag selector digunakan dalam CSS rule untuk mendifinisikan bagaimana suatu tag akan ditampilan.<br \/>\npenulisan pada htmlnya:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;p&gt;zonatutorial.com&lt;\/p&gt;\r\n<\/pre>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\np{\r\ncolor:red;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Pada dasarnya ketika kita akan memulai menggunakan CSS ada baiknya kita mengerti apa itu selector, adapun tujuan penggunaan selector adalah untuk memilih element\/ag html untuk<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[115,1082,1084,1083],"class_list":["post-3213","post","type-post","status-publish","format-standard","hentry","category-belajar-web-programming","tag-belajar-css","tag-css-selector","tag-selector-class","tag-selector-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Selector - WebHozz Blog<\/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\/blog\/css-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Selector - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Pada dasarnya ketika kita akan memulai menggunakan CSS ada baiknya kita mengerti apa itu selector, adapun tujuan penggunaan selector adalah untuk memilih element\/ag html untuk\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/css-selector\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-26T20:59:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-27T07:46:46+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"CSS Selector\",\"datePublished\":\"2016-08-26T20:59:08+00:00\",\"dateModified\":\"2019-06-27T07:46:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/\"},\"wordCount\":277,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"keywords\":[\"belajar css\",\"css selector\",\"selector class\",\"selector id\"],\"articleSection\":[\"Belajar Web Programming\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/\",\"name\":\"CSS Selector - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"datePublished\":\"2016-08-26T20:59:08+00:00\",\"dateModified\":\"2019-06-27T07:46:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/css-selector\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Selector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Selector - WebHozz Blog","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\/blog\/css-selector\/","og_locale":"en_US","og_type":"article","og_title":"CSS Selector - WebHozz Blog","og_description":"Pada dasarnya ketika kita akan memulai menggunakan CSS ada baiknya kita mengerti apa itu selector, adapun tujuan penggunaan selector adalah untuk memilih element\/ag html untuk","og_url":"https:\/\/www.webhozz.com\/blog\/css-selector\/","og_site_name":"WebHozz Blog","article_published_time":"2016-08-26T20:59:08+00:00","article_modified_time":"2019-06-27T07:46:46+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"CSS Selector","datePublished":"2016-08-26T20:59:08+00:00","dateModified":"2019-06-27T07:46:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/"},"wordCount":277,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"keywords":["belajar css","css selector","selector class","selector id"],"articleSection":["Belajar Web Programming"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/","url":"https:\/\/www.webhozz.com\/blog\/css-selector\/","name":"CSS Selector - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"datePublished":"2016-08-26T20:59:08+00:00","dateModified":"2019-06-27T07:46:46+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/css-selector\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/css-selector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Selector"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=3213"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3213\/revisions"}],"predecessor-version":[{"id":3214,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3213\/revisions\/3214"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=3213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=3213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=3213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}