Buying groceries from a store can be really challenging sometimes, well unless you’re working with a list and refuse to be deceived by the beauty of their different amazing colors. Picking the right dress for a night out could also be challenging sort of. Having a specific picture in mind makes the work a lot easier.

Selectors and Combinators in CSS are both used to style HTML elements. Understanding their roles goes a long way to improve styling methods and reduce bugs.

In this article, i would be explaining what these terms mean and how they can be used interchangeably. For a while, it was difficult for a few students i teach Front End Web to quickly grasp the difference between the terms and how to use them, till i made some rules clear.

LETS GET TO WORK

Its important to understand basic rules concerning this topic.

CSS selectors are used to select contents to be styled. Selectors are the part of CSS rule set. There are several different types of selectors in CSS.

CSS combinators are also selectors,because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in your document.

TYPES OF SELECTORS The basic selectors we have are; · Type selectors · Class selectors · ID selectors · Attribute selectors

Type selectors are also called element selectors. It selects all elements that have the given name. Lets use this example.

input { padding: 20px; margin-top: 10px; }

The element input here, has been styled. If a form is being created here, all input elements will be matched by this styling provided they are in the same document.

Class selectors Select all elements that have a specific class name. Class names are always represented with the (.) sign. So every time the class name is added to an element, it matches the style belonging to that class.

ID selectors Selects an element based on the value of its Id attribute. The ID attribute is very unique compared to the class because there can only be one element with a given ID in a document. ID’s are represented with the (#) sign. So if a specific ID name is styled in CSS it matches the element possessing it.

Attribute selectors Selects all elements that have the given attribute. Most HTML elements have some attributes such as Image, Input, Link etc… If the attribute is styled in CSS, it matches with every element possessing that same attribute.

COMBINATORS

Combinators perform a role in combining(as the name implies) selectors, thereby creating a useful relationship between them.

Some combinators are;

Descendant combinator Child combinator Adjacent sibling combinator General sibling combinator

Descendant combinators combine selectors with a space between them.These selectors select elements that are descendants of others selector irrespective of their position in the document. They do not need to be direct children to match. This is an example:

div p{ color:red; }

With this example, all div elements housing the p element will automatically have the color red.

Child combinators is represented with a greater-than symbol (>), which matches only when elements that are direct children of an parent element. Descendants outside the parent element do not match. A practical example is this:

div > p{ color:red; }

Adjacent Sibling combinator is represented with the (+) sign and is used to select something if it is directly under another element at the same level of the hierarchy. Lets take yet another example:

div + p{ font-family:serif; }

This is going to affect all (p)elements that come directly under the (p) inside the parent div.

General sibling combinator is represented also with the (~) sign. It is used to select siblings of an element even if they are not directly adjacent i.e if they do not come directly under the sibling element.

div ~ p {
    font-weight: normal;
    background-color: #000;
    color: #fff;
}

This of course, is going to affect all p elements because each one is a general sibling of the child belonging to the parent div element

NOTE

If you do not wish to add the same styling to the same element, it is advisable to give the element a class name and parse in a specific style. There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings. The only combinators are those listed above.

Conclusion

Going back to the reason why i mentioned groceries and a night out dress, using selectors and combinators in CSS makes it way easier to style multiple elements, just as a list and a mind picture help you pick specific groceries and the right dress. If you find this helpful, please don’t forget to reach out to me for questions on my social media handles@ Candor Dennis Please drop a review if it pleases you too.