CSS Selector | Part 1

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

To set the object on the html element that we want to process in css then we use the term selector, there are several types of selector in the css we need to know :

Element Selector

element selector marked with (our) element{} like example below we call <h1> element from html into css element (style element). And inside curly brackets belong to element h1 we set what happen with h1, there i give color property with blue color as value from color property, as example so that the text in h1 changes to blue or according to the settings we make.

example

element selector

Id Selector

Id selector marked by (#) fence mark and after # we give the id according to what we want. And for give the id may not to use space or start with number.

The use of id selector is to make it easier to set the object settings on the same html element, for example in 1 html file there are 5 paragraph elements but each of the 5 has a different style then the id selector helps in the process of setting each object according to the property we set in each id selector which later the id will be called or entered into the html element we want.

example

Because of i setting an id (.rahmah{}) and inside that id i setting the background color property and i call that id to one of <p> element in html in <p> element with the text “ini paragraf 1” so the element that I set it changed the background color to pink or according to what we want.

And other <p> element is not changes because i am not setting anything to them.

Class Selector

Class selector is so similar function with id selector but the position of the id is stronger than the class . I mean if there are id and class selector to i call into the same element in html, element with id more strong the result.

example

The result of scripts above is text “ini paragraf 1” will be change to blue background color because the position of id is more strong, but if you want use class selector to your scripts it does not matter, that’s also good and i often use class selector to my scripts too.

Element class/id selector

This is a combination of elements with class or id meaning only elements that use the id or class that we set can change according to our settings.

example

So… The purpose of the scripts above is imtihan class can only be used in <h2> element.

Grouping Selector

Grouping selector is merging several elements to be set together directly with the property and the same value .

example

From the scripts above that element will be change are <h2>,<h3>,<h4 >element .

Well i think enough until here actually still there is some selector again but i will continue to the next session in part 2, stay tune for the next part.

I hope this article useful for us and for many people, i apologize for all of my mistakes, thanks for all of your attention and contribution.

Janganlah takut merasa bodoh saat belajar namun takutlah saat engkau merasa pintar dan tak mau belajar . Belajar itu butuh proses tak bisa langsung meluncur layaknya roket. Allah melihat kesungguhan dan ikhtiar seseorang soal hasil itu menjadi urusan sang Rabbi. ketika kalian merasa tak paham saat belajar bersabarlah semua terjadi atas kehendak Allah yang penting kita terus mau berdo’a, ikthtiar (berusaha), dan tawakal. kalau Allah sudah berkata Kun maka tak ada yang dapat menolak kehendaknya. Allah itu maha adil kalau kita belum paham sekarang in sya Allah, Allah akan memberikannya pada saatnya entah kapan, bagaimana, seperti apa. Yakinlah bahwa Allah tak akan membebani seseorang melainkan dengan kesanggupannya. dan catatan untuk orang2 yang memiliki pemahaman lebih jangan pernah meremehkan orang2 yang dibawah kalian sedikitpun karena semua yang ada pada kita tak lain semata2 pemberian dari sang Ilaah… bersyukurlah^^ -R.
#sharingsekaligusdakwah

see you…

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

https://github.com/RahmahNajiyah