SlideShare a Scribd company logo
1 of 13
Download to read offline
selector basic
CSS
http://www.w3schools.com/cssref/css_selectors.asp
digunakan pada css untuk
mengenali sebuah elemen HTML
yang akan diberi style
“
selectors
elemen HTML
id
class
complex selector
elemen HTML
selector sederhana
elemen HTML
operator ‘,’ / koma (dan)
elemen HTML
operator ‘ ’ / spasi (yang ada di-dalam)
id
menggunakan ‘#’
id
• Sebuah elemen HTML hanya boleh memiliki 1 id
• Setiap halaman hanya boleh memiliki 1 elemen dengan id
tersebut
• Dapat digunakan sebagai penanda halaman untuk link
• Digunakan juga untuk javascript
• Sebaiknya tidak digunakan untuk CSS (lebih baik gunakan class)
class
menggunakan ‘.’
class
• Kelas yang sama dapat digunakan pada beberapa elemen HTML
• Satu elemen HTML boleh memiliki banyak kelas (dipisahkan oleh
spasi)
elemen HTML + id atau class
menggabungkan elemenHTML dengan id atau class
mahalo.
sandhikagalih@unpas.ac.id
channel YouTube :
webProgrammingUNPAS

More Related Content

What's hot

CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSSandhika Galih
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelSandhika Galih
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafSandhika Galih
 
HTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkHTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkSandhika Galih
 
HTML Dasar : #5 Heading
HTML Dasar : #5 HeadingHTML Dasar : #5 Heading
HTML Dasar : #5 HeadingSandhika Galih
 
CSS Layouting #4 : Float
CSS Layouting #4 : FloatCSS Layouting #4 : Float
CSS Layouting #4 : FloatSandhika Galih
 
HTML Dasar : #1 Pendahuluan
HTML Dasar : #1 PendahuluanHTML Dasar : #1 Pendahuluan
HTML Dasar : #1 PendahuluanSandhika Galih
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldSandhika Galih
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : PositionSandhika Galih
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 

What's hot (20)

CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSS
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
CSS Dasar #1 : Intro
CSS Dasar #1 : IntroCSS Dasar #1 : Intro
CSS Dasar #1 : Intro
 
HTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkHTML Dasar : #7 Hyperlink
HTML Dasar : #7 Hyperlink
 
HTML Dasar : #5 Heading
HTML Dasar : #5 HeadingHTML Dasar : #5 Heading
HTML Dasar : #5 Heading
 
CSS Layouting #4 : Float
CSS Layouting #4 : FloatCSS Layouting #4 : Float
CSS Layouting #4 : Float
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
 
HTML Dasar : #8 Image
HTML Dasar : #8 ImageHTML Dasar : #8 Image
HTML Dasar : #8 Image
 
HTML Dasar : #1 Pendahuluan
HTML Dasar : #1 PendahuluanHTML Dasar : #1 Pendahuluan
HTML Dasar : #1 Pendahuluan
 
HTML Dasar : #9 Tabel
HTML Dasar : #9 TabelHTML Dasar : #9 Tabel
HTML Dasar : #9 Tabel
 
HTML Dasar : #3 Tags
HTML Dasar : #3 TagsHTML Dasar : #3 Tags
HTML Dasar : #3 Tags
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
 
HTML Dasar : #10 Form
HTML Dasar : #10 FormHTML Dasar : #10 Form
HTML Dasar : #10 Form
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css ppt
Css pptCss ppt
Css ppt
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Css
CssCss
Css
 

Similar to CSS Selectors Guide - Mengenali Elemen HTML untuk Style

Similar to CSS Selectors Guide - Mengenali Elemen HTML untuk Style (11)

CSS
CSSCSS
CSS
 
Pengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docxPengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docx
 
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman webModul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman web
 
Css
CssCss
Css
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Css
CssCss
Css
 
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
 
Eksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 PendahuluanEksperimen CSS - 01 Pendahuluan
Eksperimen CSS - 01 Pendahuluan
 
Pengenalan internet 13
Pengenalan internet 13Pengenalan internet 13
Pengenalan internet 13
 
Blog cms template
Blog cms templateBlog cms template
Blog cms template
 

Recently uploaded

PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxalalfardilah
 
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxPPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxHeruFebrianto3
 
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).ppt
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).pptModul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).ppt
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).pptYanseBetnaArte
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxRezaWahyuni6
 
Kelompok 4 : Karakteristik Negara Inggris
Kelompok 4 : Karakteristik Negara InggrisKelompok 4 : Karakteristik Negara Inggris
Kelompok 4 : Karakteristik Negara InggrisNazla aulia
 
polinomial dan suku banyak kelas 11..ppt
polinomial dan suku banyak kelas 11..pptpolinomial dan suku banyak kelas 11..ppt
polinomial dan suku banyak kelas 11..pptGirl38
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau tripletMelianaJayasaputra
 
Karakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaKarakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaNadia Putri Ayu
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxWirionSembiring2
 
Model Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsModel Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsAdePutraTunggali
 
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfAKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfTaqdirAlfiandi1
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdfShintaNovianti1
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxarnisariningsih98
 
Demonstrasi Kontekstual Modul 1.2. pdf
Demonstrasi Kontekstual  Modul 1.2.  pdfDemonstrasi Kontekstual  Modul 1.2.  pdf
Demonstrasi Kontekstual Modul 1.2. pdfvebronialite32
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
alat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxalat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxRioNahak1
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdfMMeizaFachri
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxsyafnasir
 

Recently uploaded (20)

PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
 
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxPPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
 
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).ppt
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).pptModul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).ppt
Modul 9 Penjas kelompok 7 (evaluasi pembelajaran penjas).ppt
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptx
 
Kelompok 4 : Karakteristik Negara Inggris
Kelompok 4 : Karakteristik Negara InggrisKelompok 4 : Karakteristik Negara Inggris
Kelompok 4 : Karakteristik Negara Inggris
 
polinomial dan suku banyak kelas 11..ppt
polinomial dan suku banyak kelas 11..pptpolinomial dan suku banyak kelas 11..ppt
polinomial dan suku banyak kelas 11..ppt
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet
 
Karakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional DuniaKarakteristik Negara Brazil, Geografi Regional Dunia
Karakteristik Negara Brazil, Geografi Regional Dunia
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
 
Model Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsModel Manajemen Strategi Public Relations
Model Manajemen Strategi Public Relations
 
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdfAKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
AKSI NYATA Strategi Penerapan Kurikulum Merdeka di Kelas (1).pdf
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
 
Demonstrasi Kontekstual Modul 1.2. pdf
Demonstrasi Kontekstual  Modul 1.2.  pdfDemonstrasi Kontekstual  Modul 1.2.  pdf
Demonstrasi Kontekstual Modul 1.2. pdf
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
alat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptxalat-alat liturgi dalam Gereja Katolik.pptx
alat-alat liturgi dalam Gereja Katolik.pptx
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
 

CSS Selectors Guide - Mengenali Elemen HTML untuk Style