Sophisticated CSS User Series Part IV: Different Types of CSS Selectors

What are CSS Selectors?

CSS has different types of set of rules which defines the functioning of the CSS styling. In all the rules of CSS, selectors are those set of rules which defines the selected part of the text. The selector means that part where you want to add the style and highlight it.

CSS has numerous different set of selectors which helps out web developers in styling the websites. So, in the fourth installment of Sophisticated CSS User Series, we are going to study the different types of CSS Selectors. So, hop on people and let’s study the different types of CSS Selectors right away.

#1. Universal Selector

Universal Selector is the selector which applies to the whole content of the page at once. As we know HTML page is built on the different HTML tags and each HTML tag denotes different elements. Look at the example of CSS Universal Selector to get a better idea:

* {

  color: green;

  font-size: 20px;

  line-height: 25px;

}

In this example, three lines of code are embraced inside the curly braces (color, font size, and line height). This mean universal selector will be applied to the whole HTML page. Universal Selector can be used with the combination of different other selectors also.

#2. Element Type Selector

Element Type Selector is also sometimes referred to as Type Selectors. As in this selector, one or more HTML element of the same name should match. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements. The below-mentioned element type selector is used to match <ul> of the page:

ul {

  list-style: none;

  border: solid 1px #ccc;

}

#3. ID Selector

ID Selector is defined by the hash or pound symbol preceding to the string of character. The string of character is defined by the developer. This selector match with any type of HTML element which has same ID attributes as the value of selector, minus the hash symbol. The example of ID Selector is:

#container {

  width: 960px;

  margin: 0 auto;

}

#4. Class Selector

This is the most popular type of selector. It is defined by the dot preceding to a string of one or more characters. Just like ID selectors, the string of character is defined by the developer itself. The class selectors also match to all the elements of the page who’s class attribute is set as the same value of the class, of course minus the dot symbol. The following set of rules elaborates class selectors:

.box {

  padding: 20px;

  margin: 10px;

  width: 240px;

}

#5. Descendant Combinator

Well, the Descendant Combinator or we can say descendant selector is a very cool selector. Descendant Combinator allows you to combine two different selectors to be more specific in the function. Descendant Combinator looks like:

#container .box {

  float: left;

  padding-bottom: 15px;

}

#6. Child Combinator

The work of the child selector aka child combinator is similar to the descendant selector. But, the only difference is that it only targets the current child element of the post. For example:

#container > .box {

  float: left;

  padding-bottom: 15px;

}

#7. General Sibling Combinator

As the name indicates, this selector selects the elements according to their relationship to each other. General Sibling Combinator selects the elements which are besides in the HTML tag. General Sibling Combinator looks like something this way:

h2 ~ p {

  margin-bottom: 20px;

}

#8. Adjacent Sibling Combinator

Adjacent Sibling Combinator is similar to the general sibling combinator, apart from the two things. First, Adjacent Sibling Combinator is defined by the plus sign. Second, in the adjacent sibling combinator, immediate sibling element is targeted, whereas in general sibling combinator any sibling element can be targeted. In the CSS, Adjacent Sibling Combinator looks like this:

p + p {

  text-indent: 1.5em;

  margin-bottom: 0;

}

 

Conclusion

So, developers, CSS Selectors are very important part of the styling process. That’s why picking up the right CSS Selector is highly appreciated, so keep on studying different types of CSS Selectors to enhance your knowledge bank.

Send a Message