CSS Selectors theory you'll never forget..
Cascading Style Sheets
Widely known as CSS, is a selective styling language used to design HTML elements and web pages. In CSS the most important thing is to learn how can one pick a specific element and target the same in web page.
CSS can be written in 2 ways :
<head>
<!-- other head tags -->
<link rel="stylesheet" href="style.css">
</head>
CSS Selectors
A CSS selector selects the single or multiple HTML element one wants to style. Majority of the CSS game is all about acknowledging the requirement and making the selection of elements accordingly.
Universal Selector :
Selects everything on web page. It applies the same styles to every element on the page.
Syntax = *
<head
<!-- other head tags -->
<style>
*{
background-color:#E5D68A ;
color: #6A1B4D;
}
</style>
</head>>
Individual Selector :
selects particular tag from web page. one should only write the tag name, and not write brackets around the tag name.
Syntax = element name
<head>
<!-- other head tags -->
<style>
p{
background-color:#E5D68A ;
color: #6A1B4D;
}
</style>
</head>
Class and ID selector
Selects all elements that've the given class attribute.
Syntax = .classname
Selects an element based on the value of its id attribute. There should be ONLY ONE element with given id in a document.
Syntax = #idname
<head>
<!-- other head tags -->
<style>
.zolo{
background-color:#E5D68A ;
color: #6A1B4D;
}
#lolo{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>
and selector (chained) :
Selects multiple classes or id's from HTML page. All conditions has to be true.
Syntax = #id.class or .class#id or .class.class
<head>
<!-- other head tags -->
<style>
.zolo.solo{
background-color:#E5D68A ;
color: #6A1B4D;
}
.zolo#yolo{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>
Combined Selector :
Selects more than 1 element at a time.
领英推荐
Syntax = ,
<head>
<!-- Other head tags -->
<style>
li,h2{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>
inside an element:
selects a particular order of element
Syntax = space
<head>
<!-- other head tags -->
<style>
div ul p{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>
Direct Child Selector
A direct child is a child element that comes immediately below the parent in terms of hierarchy. That is to say, not a grandchild or great-grandchild.
Syntax = >
<head>
<!-- other head tags -->
<style>
div>li{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>>
Siblings Selector
The second element follows the first and both share the same parent.
Syntax = ~ (not necessarily immediate) or + (necessarily immediate)
<head>
<!-- other head tags -->
<style>
p ~ span {
color: #D82E2F;
}
h2+p{
background-color: #35BDD0;
color: #4d4d4d;
}
</style>
</head>
Pseudo Class Selector:
It is a keyword added to a selector to define a special state of the element.
There are two types of elements: 1. Block level elements (reserves it's own space in HTML web page), 2. Inline elements (reserves the )
state of element is simply an action that is happening to it. eg; hover, click, visited, focus link
For a pseudo selector the compulsory attribute to provide in css is "content:' ';". It can be empty or have some value as empty strings always renders some value.
Nth Child selector :
It selects every element that is the nth child of it's parent. 'n' can be a number, keyword, or formula. It is a single argument that describes a pattern for matching element.
eg, odd, even, a(n)+b
Hope you enjoyed reading this article. Please like, comment and share with your friends and colleagues.