CSS Selectors

CSS Selectors

Hello Friends,

So we already discussed about introduction to CSS is our previous post. Now we are going forward towards the CSS selectors.

Read Also:

So what are CSS Selectors?

CSS selectors are the terms or keywords which we define in our HTML document elements. So by using the define statement we write our CSS document. In CSS document its known as Selectors, which indicates target element of HTML document under which selector get defined.

For example:

HTML Code:

<html>

<head>

<style>

.container{

width: 500px;

height: 500px;

border: 2px solid red;

}

</style>

</head>

<body>

</div>

</body>

</html>

There are several types of Selectors we have in CSS:

CSS Universal Selector
CSS Element Selector
CSS Class Selector
CSS ID Selector
CSS Group Selector
CSS Attribute Selector
CSS Combinators
CSS Pseudo

CSS Universal Selector:

The universal selector is act like a wildcard selector which applies to whole document. That mean if we define any element under universal selector then the effect will apply to that element no matters how much time we use that element.

Syntax:

*{ } * Element{ }

CSS Element Selector:

This selector in CSS document represent by the element name used in HTML document. That means if you wants to make effect on tag, you can use that tag name as a selector. Whenever you use that element in HTML document the same changes will make effect.

Syntax:

element1{ } element2{ } element3{ }

CSS Class Selector:

In this type of selector we define an attribute named “class” under our HTML document. Suppose we have two “div” elements if we want to make change to only one or different changes for both elements we define different “class” attributes to target “div”. we can create same class for a single or multiple elements for grouping the effects.

Syntax:

.ClassName{ }

CSS ID Selector:

In this type of selector we define an attribute named “id” under our HTML document. Suppose we have two “div” elements if we want to make change to only one or different changes for both elements we define different “id” attributes to target “div”. as we knows that ID should be unique so this selector can be used only for one element once.

Syntax:

#IdName{ }

CSS Group Selector:

If you want to make same effects on multiple elements you can group those elements and define your changes.

Syntax:

Element1, element2, element3{ }

CSS Attribute Selector:

This selector works for attributes you defined under your HTML element.

Syntax:

[attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

CSS Combinators:

There are many combinators present in CSS by which you can indicate the target/child element under the root element.

i.e.

Here div element is root element and h1 is a child element.

Syntax:

rootelement childelement, rootelemet > childelement, rootelement ~ childelement, childelement + rootelement, rootelement || childelement

We will explain each combinator as below:

Child Combinator: In this type we use “>” symbol to indicate the child member to whom we are targeting for our CSS code.Ex: div > h1{ } - Here we are targeting all h1 elements under div elements.
Descendant Combinator: in this type we use “ “ (space) for targeting next node of root element.Ex: div h1{ }
General Sibling Combinator: “~” symbol is used in this operator, that means child will follow the same as root element, and both share the same parent.Ex: p ~ span { }
Adjacent Sibling Combinator: in this type we use “+” sign, the meaning is child operator is directly follows the root element.Ex: h2 + div { }
Column Combinator: the symbol of this operator is “||”, we usually use this for columns or table columns. That means it select the child which belongs to root.Ex: col || td { }

CSS Pseudo:

Pseudo selectors are very special and different from other selectors. They used “:” and “::” symbols to target the activity. If you are using Pseudo class you have to use “:” symbol and if you are using Pseudo element then you have to use “::” symbol.

Syntax:

element:action { }, element::action { }

Let’s do some code:

<!DOCTYPE html>

<html>

<head>

<title>CSS Selectors Example</title>

<style type="text/css">

padding: 0;

margin: 0;

text-decoration: none;

}

body{

background-color: #333;

}

header h1{

font-family: "Ubuntu";

color: red;

}

.subHeading{

font-family: "Raleway";

color: lime;

}

#para{

font-style: italic;

color: orange;

}

[width]{

background-color: red;

}

nav > a{

color: #ffffff;

font-family: Raleway;

}

a:hover{

color: #333;

cursor: pointer;

}

</style>

</head>

<body>

<h1>MTH Schools</h1>

<h2 class="subHeading">Technical School For Everyone</h2>

</header>

<a href="#">Home</a> |

<a href="#">Products</a> |

<a href="#">Services</a> |

<a href="#">About Us</a> |

<a href="#">Contact Us</a>

</nav>

<main>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span>Duis aute irure dolor in reprehenderit in voluptate velit esse</span> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</main>

</body>

</html>

Result:

Explanation:

So now you have code and its result too. Now I will tell you in code where is used which selector for better understanding.

padding: 0;

margin: 0;

text-decoration: none;

}

The universal selector “*” is telling that there is no margin and padding in the document now.

body{

background-color: #333;

}

Its example of element selector, where we targeting element name directly.

header h1{

font-family: "Ubuntu";

color: red;

}

It’s one example for combinatory where its saying “h1” element under “header” element font and color will be change.

.subHeading{

font-family: "Raleway";

color: lime;

}

It’s a class selector which is representing by “.”, the class we defined under html document.

#para{

font-style: italic;

color: orange;

}

It’s an id selector which is representing by “#”, the id we defined under html document.

[width]{

background-color: red;

}

This is a attribute selector, the attribute “width” I have giver under “nav”, resultant the background of “nav” is changed to red.

nav > a{

color: #ffffff;

font-family: Raleway;

}

It’s one example for combinator selector where I am saying that all “a” element text color and font will change which are present under “nav” element.

a:hover{

color: #333;

cursor: pointer;

}

This is a Pseudo sector its saying that whenever we take mouse cursor to the text under “a” element from html, the text color will change to silver and the mouse style will become as pointer.

Read Also:

So we discussed about CSS selectors, hope you understood something from this article. Keep practicing the code and ask your doubts and query in comment section. Because keep practicing only make you sharp.

Thank you all.