CSS Selectors The Easiest Way-No worry any more

this article will drive you through how to use CSS selectors with a clear examples that will make it easy for ever.

CSS stands for cascading stylesheet which is used to tell the browser how an HTML element is to be displayed in the page, in general its used to style html pages. In order to style an html element we use CSS selectors.

CSS selectors are used to select the HTML element we want to apply styling for. there are different types of selectors.. Explained below:

Types of selectors

Selectors are used to target an html element in different ways and knowing which type of selector you might need will help you to find the right tool for the job.

Universal Selector(*)

this type of selector targets All the html elements in our html file. its has been evident that when ever we write code in html file and we run it , the output is displayed with predefined font and margins set by the browser, in this case we use the universal selector to reset the padding and margin.

Syntax

*{
/* your styling goes here*/
}

Example:

Individual Selector

this type of selectors is used to select the html element by its tag name like p, div, a ,li ,ul ....etc. when we select the html tag for styling , all the elements in the HTML file which has the same tag name will have the same styling either its a parent element or a child element.

Syntax

p{
/* your styling goes here*/
}
div{
/* your styling goes here*/
}

Example:

Class And ID Selectors

Class Selector

classes in html makes it easy for us to choose a specific element and style it. same Class name can be used on multiple elements. not only that but we also can apply more than one class to single html element. When we target a class we use a “.” in front of the name in the CSS as seen in the illustration below. Syntax

.class1{

}

.class2{

}

ID Selector

ID's in html are Unique, we cant use the same id name for other element because its unique.

ID selector is very useful when targeting a specified element. the difference between ID and class selectors is that any html element can have the same class name of another element, but it cant have the same ID. When we target a an html element with an id we use a “#” in front of the name in the CSS.

syntax:

#Id1{

}
#id2{

}

Example:

Chained Selector

this type of selectors is used to target various elements/classes/ID's for a specific requirement. to select the targeted elements we mention the class or element name side by side wit no spaces and those element will be selected.

Syntax:

.class1.class2 {
  background-color: lightblue;
}

Example:

Combined Selector

this type of selector is used to select more than one tag or id or class name at the same time for a specific styling requirement.

it enables you to target many html element on the page and apply the same styling to all of them at once instead of selecting them one by one. In combined selector the tags or id's or classes choosen for styling are separated with commas.

Synatx:

p, a, div{
/*Your styling goes here*/
}

Example:

Descendant Selector

this way of selecting an html element is done by tracing back the tag to its parent tag.

its ideal when you don't want to use classes or id's for html tag that has been used many times in the html file so we use this way of choosing the element.

it is working by using a space between the tags. as its show in the example below.

Syntax:

div ul li{
*/your code goes here*/
}

Example:

Direct Child selector

It applies its logic from its name by selecting the second selectors which are a direct children of the first selectors or parent element. its is denoted By (>).

Syntax:

selector1 > selector2 { style properties }

Example:

Adjacent Sibling Selector ~ and +

Adjacent Sibling Selector (+)

The adjacent sibling selector (+) is used to select an element that is directly after another specific element. note that the elements must have the same parent and they must follow each other is order.

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

Example:

the example below illustrate the usage of + ~ selectors:

the + selector selects only the first next sibling to it.

the ~ selects all the next element to it.

Pseudo-classes

CSS pseudo classes are used to specify a special state of the selected element. for example the pseudo-class ::before can be used to create a content. and this content will be existing before the selected element.

::before

this pseudo element allow you to insert content before the selected element in the html page with out it needing to be in the HTML. we just add the content through CSS.

Pseudo-elements are typically not shown in HTML element trees. However, they can be seen using a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.

Syntax:

selector1::before{
content: " "; /*this is mandatory*/
/* your code goes here*/
}

Example:

::after

this pseudo element allow you to insert content after the selected element in the html page without it needing to be in the HTML. we just add the content through CSS.

Pseudo-elements are typically not shown in HTML element trees. However, they can be seen using a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.

Syntax:

selector1::after{
content: " "; /*this is mandatory*/
/* your code goes here*/
}

Example: