Understanding CSS Selector and Declarations

CSS Web Development Front End Technology

CSS selectors are used to selecting HTML elements by matching each element of a given pattern. We define the styles by declaring property and their value inside the selector.

Syntax

The syntax for declaring styles is as follows −

Selector {
property: value; }

CSS has simple selectors, attribute selectors, pseudo-classes, pseudo-elements and a combination of selectors through standard combinators. The following table lists some of the selectors −

Selector	Type of selector	Description
*	Universal selector	Matches all elements
e	Type selector	Matches all elements of type e
e1e2	Descendant selector	Matches any e2 element that is a descendant of an e1 element.
e1>e2	Child selector	Matches any e2 element that is a child of an element e1.
e[bar="demo"]	Attribute selector	Matches any e element whose "bar" attribute value is exactly equal to "demo".
#id	ID selector	Matches element with ID equal to "id".

Example

The following examples illustrate CSS selectors −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline red;
}
span {
   font-size: 1.4em;
}
#demo {
   box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html>