Learning CSS Part 5 : Getting to Know Basic CSS Selector Types


CSS selector types have varied, even very diverse depending on our needs for designing web pages. In the Getting to Know Basic CSS Selector Types, I will discuss the basic selector types in 5 in CSS. Selector CSS not only 5 of these types but in most cases, it is already sufficient to make a web page HTML + CSS.

The selector is a pattern (pattern) that is used to ‘ seek ‘ a tag in HTML. The analogy to the selector, for example: search for all p tags, or search the entire h1 tag which has the attribute class = title.

CSS has a lot of selectors, we will discuss it one by one:

Universal Selector

The universal selector there is only 1 in CSS, IE the asterisk “*”. The selector of this aims to ‘ seek ‘ all existing tags.

The Universal Selector Example CSS:

The CSS code above intends to create an entire HTML tag is blue, and the background is white.

Type Element Selector

Type element Selector or Tag Selector is the term for the selector whose value is the HTML tag itself. Any HTML tags can be used as a selector, and all tags will be captured by this selector.

Examples Of Element Type Selector CSS:

Sample CSS code above will make all tags <h1> will be underlined, and all tags <p> will 14 pixel-sized.

Effects of the element type selector are from the beginning tag, until the end of the tag. If inside tag <p> There is a tag <i>, then the tag will also be sized 14 pixels, to found the closing tag <p>.

Class Selector

Class Selector the selector is one of the most common and most often used. Class Selector will ‘ find ‘ all tags that have the attribute class with the appropriate values.

To use a Class Selector, we should have the HTML tags that have attributes of the class. For example:

Note that for all of the tags above, we add the attribute class with its value is the name of the class itself. A class name can be owned by more than 1 tag, and in a tag can have more than 1 class.

For example in the last line in the example above, the h2 tag has an attribute class = “headline is important”. This tag contains 3 class, i.e. title, important, and colored.

As for the CSS Class Selector is as follows:

To use a class selector in CSS we use the comma before the name of the class.

For our example, the whole class that has the value “paragraph_first “, text color will be red. And the whole class titles will have a 20-pixel font.

ID Selector

ID Selector together with class selector is a selector is the most common and is also often used (though not as often as the class selector). The use of the ID selector is almost the same as the class selector, with the difference if at the Class Selector we use the attribute class to an HTML tag, for ID selector, we use the id attribute.

Examples of the use of the id attribute in the HTML tag :

In addition to the id attribute of the CSS selector, also serves as a unique code for each tag (mainly used for JavaScript code). Because of this, the user id should be unique and should not be the same. In other words, it can only be used one time on a web page and should not be the same.

Examples of the use of the id selector code CSS Class Selector is as follows:

In the CSS code, we use the fence sign “#” as a marker that we look for tags that have an id.

Attribute Selector

Our last base selector is a selector attribute. This selector is a little more advanced in comparison with the previous selector-selector. The attribute Selector is used to find all tags that have the attributes that are rendered.

Examples of the use of the Attribute Selector CSS code is as follows:

As can be seen from the above examples, every attribute selector must be between square brackets “[” and “]”.

[href] will match all tags that have the href attribute, whatever the value of the href (href  usually found on the tag <a>). For example [type = “submit”] would match the tags that have attributes of type submit value, which in this case is the submit button in the form.

Despite having the capability of searching for a very specific tag, but the attribute selector is not very often used.

In addition to the five basic selector above, CSS selector still has a more ‘ distant ‘ in selecting tags that will be manipulated, one example, such as pseudo selector that is used for each event from a link, or known by the mouseover effect, that we look for the condition at the time when the mouse is over a particular tag. Pseudo Selector it will we discuss on another occasion.

That’s 5 Basic selectors in CSS, which in addition to standing on its own, can also be combined with other selectors more specific purposes. Merging selector it will we discuss the next tutorial on how to use the CSS Selector.


Please enter your comment!
Please enter your name here