Explained Types of Basic CSS Selectors



In this section, the point to be discussed is regarding CSS or Cascading Style Sheet, especially the scope of basic selectors it has. There are five basic types of selector in CSS that will be explained here including universal selector and other basic types. There are some applications of selectors as well. The first one, it may be applied to specific elements of attribute. The second application is to all elements which are included in specific type. The last, it may be applied to elements in document tree which depends on the relativity place of each other.

Universal Selector and Other Four Basic Types of Selector

·         Universal selector
The first type of selector is universal. This kind of selector will work wildly as card character. It will select all elements within a web page. In this case, every page of HTML which has been built on the content will be placed within the tags of HTML. Each tag set represents a page element. This universal type of selector will be declared using the asterisk. You are also allowed to use this selector with the combination of other selector’s type. Example :

 * {
   color: blue;
   background-color: white;}
  }
·         ID selector
ID selector will be declared using pound or hash symbol that precedes the string of character. The string itself will be defined by developer. This selector type could also match any element of HTML in which the ID attributes and selector has same value, but minus hash symbol. The element of ID on web page at least has to be unique. The selector of ID is quite inflexible since kind of style used in the rule set of this selector can be only used once in each page.  Example :
#par1{
text-align:center;
color:red;
}
·         Class selector
Type of CSS selector which is included as the most useful is class selector. The declaration of this selector is using a dot that precedes string of character. These strings are defined by developer. This selector can match all elements in a page in which the class attribute is set to same class value, but minus dot symbol.  It is beneficial for you to have multiple elements in one single page with same value of class attribute. By doing so, you are allowed to avoid the needless repetition and reuse the styles. This kind of element is also valuable to the extent to which HTML allows the addition of multiple classes to single element.  
Example :
.komentar{
text-align:left;
color:red;}
·         Element/tag selector
The next type of basic selector is element selector which is also known as tag selector. Element/tag selector simply refers to type selector. It has to be match to one or even more elements of HTML with the same name. Thus, selector in nav can match all elements of HTML nav. Besides, selector of ul will also match with unordered lists of all HTML.  Example :

h1
{text-decoration: underline;}
p
{font-size:14px;}

·         Attribute selector
The target of attribute selector is element based on value and/or the presence in HTML attribute. It is declared by using the square brackets. Before the square bracket in the opening, there has to be no space unless you have the intention to use them along with descendant combinator. Moreover, this selector can be declared with no value but only the attributes.
Example :

 [href]
{font-size:20px ;}
[type="submit"]
{width:30px;}


SHARE

About andy

I made this blog just to make about the science that I learned during the study, if there is something wrong please comment below, and do not forget to share, thank you.

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar