Mastering Cascading Style Sheet - Structuring Your Code - Selectors Advanced and Child Selectors

  • Posted on: 16 May 2017
  • By: Hernando Cadet

In the world of technology, many are fighting to be the best programmer is the world, which is not a bad idea; but to do that, developers have to get on their grind and learn new things on a daily basis.

When a developer is not sharpening their skills on a daily basis, then another developer, will take their spot, at a job, or at an opportunity; because the previous developer, was not on his/her job.

In today’s article we are going to continue talking about CSS3 in particular those selectors, which we’ve discussed in our last article.

We still have to talk about the other selectors, which you may or may not encounter in your web development experience.

One other selector, which we have not talked about is, the universal selector, which is one of the most powerful selectors seen in CSS, but is also the least used selector, of all the selectors available in CSS.

Matching all of the available elements, the universal selector, acts as a wildcard; the universal selector is also denoted, by an asterisk; similar to wildcards in other programming languages.

Every element on a page is styled, when the universal selector is used, using the following CSS rule, for example.

* {

padding: 0; 

margin: 0;


would remove the default browser padding and margin on every element.

The universal selector can be used, to style all the descendants of a particular element, when it is combined with other selector; also the universal selector can be used, to skip a level of elements as well.

When using selectors, a front-end web developer, has to keep in mind that browsers, will be a problem, for the page to load correctly.

Advanced selectors are supported by modern browsers, such as Firefox and Safari, but Internet Explorer or IE is always a pain, when it comes to front end web development.

But if a browser does not support certain selectors, due to lack of understanding, then the browser, ignores that selector, because CSS fortunately, was developed with backward compatibility in mind, which means it knows that some browsers are too dumb to understand the language.

A developer who is designing an HTML document, doesn’t have to worry about causing problems, in older browsers, when the developer is applying, their stylistic and usability establishments.

Advanced selectors, are usually used, for something critical such as, the critical functioning of a website.

There are also child and adjacent sibling selectors, which are a type of advanced selectors; the child selector only targets, the elements immediate descendant, or children, which is in contrast with the descendant selectors, which will select all the descendants of an elements.

The > combinator is used to separate, the two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.

This is the syntax of the child selectors: selector1 > selector2 { style properties } and here is a good example, where the first div will turn red.

span { background-color: white; }

div > span {

color: red;



<span>Span #1, in the div.

<span>Span #2, in the span that's in the div</span>



<span>Span #3, not in the div at all.


Span #1, in the div

Span #2, in the span that's in the div Span #3, not in the div at all

If you can notice on the child selector, the first div is turning to the color we selected at the top.

If you still have questions about these selectors, don’t forget to browse the website, to find much more important information, which would be good for your research on front-end development.

Thank you, for reading this article!!!