Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Understanding CSS Selector and Declarations
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;
}
For example −
div {
height: 200px;
}
Above, the selector is div. The property is the height and the value 200px.
Selectors
CSS has simple selectors, attribute selectors, pseudo-classes, pseudo-elements and a combination of selectors through standard combinators. Here are the selectors −
Basic selectors
Combinator selectors
Pseudo-classes
Pseudo-elements
Attribute selectors
Basic Selectors
The basic selectors include selecting elements based on id, class, etc as shown below −
#id = ID Selector
.class = Class Selector
element.class = Select specific elements
element, element = Grouping Selectors
* = Universal Selector
CSS class selector
The class attribute is used to set the class selector. This will select a specific element. You need to write the . i.e., the period character and follow it by the class attribute to select the element with a specific class −
Example
Let us see the example ?
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: rgb(0, 255, 13);
border: 3px solid rgb(27, 0, 78);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Create a Circle</h1>
<div class="circle"></div>
</body>
</html>
CSS id selector
The id attribute is used to set the id selector. This will select a specific element. You need to write the # character and follow it by the id to select the element with a specific id −
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>
CSS Grouping Selectors
The elements on a web page can be styled together using the grouping selectors. You need to separate each selector by a comma −
div, p {
margin: 4px;
float: left;
height: 200px;
width: 300px;
box-shadow: inset 0 2px 4px olive;
background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div, p {
margin: 4px;
float: left;
height: 200px;
width: 300px;
box-shadow: inset 0 2px 4px olive;
background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
background-position: 50% 50%;
color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>
Universal Selector
The CSS * selector is a universal selector which is used to select all elements of the HTML DOM. If you want to set a similar style for the entire document, then use the Universal selector.
The syntax for CSS universal selector is as follows: Place the styles you want to set for the entire HTML document −
* {
/*declarations*/
}
The following example illustrate CSS universal selector. To set the margins and padding settings for all the elements on the web page, set it under the Universal Selector −
* {
padding: 2px;
margin:5px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#tech1 {
cursor: pointer;
}
#tech2 {
cursor: pointer;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body>
</html>
Combinator selectors
The combinator selectors defines the relationship between selectors. Here are the types −
Adjacent sibling selector (+)
General sibling selector (~)
Let us see some examples.
Adjacent sibling selector (+)
Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element.
The syntax of the CSS adjacent sibling combinator is as follows −
Selector + Selector{
attribute: /*value*/
}
The following example illustrate CSS adjacent combinator property. Here, the div + p will select and style the first <p> element placed immediately after <div> elements −
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
box-shadow: inset 0 0 24px cyan;
justify-content: space-around;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
section {
box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg" />
<div>
<p>Check this</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>
General sibling selector (~)
If you want to select siblings of the same parent irrespective of the position of the second selected element, we use the CSS general sibling combinator.
The syntax of the CSS general sibling combinator is as follows −
Selector ~ Selector{
attribute: /*value*/
}
The following example illustrate CSS general sibling combinator property. This selects every <p> element that is preceded by a <section> element −
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
background: thistle;
justify-content: space-between;
}
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" />
<div>
<p>Random text 1</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg" />
</div>
</body>
</html>
Pseudo class Selectors
With the pseudo-class selectors, the elements are selected based on a certain state, like active, checked, hovered, valid, invalid, etc. The following are some key Pseudo-classes −
:active = To select the active link
:checked = To select every checked <input> element
:first-child = To select the first child of an element?s parent
:first-of-type = To select the first element of its parent
:focus = To select the element that has focus
:hover = To select links on mouse over
:link = To select all unvisited links
:not(selector) = Selects every element that is not a <p> element
:nth-of-type(n) = To select an element that is the second element of its parent
:only-of-type = To select an element that is the only element of its parent
:only-child = To select an element that is the only child of its parent
:out-of-range = To select elements with a value outside a specified range
:valid = To select elements with a valid value
:visited = To select all visited links
Let us see some examples to implement the pseudo class selectors −
The :first-of-type pseudo class
To select the first element of its parent, use the :first-of-type pseudo class −
div:first-of-type {
margin: 5% 0 0 20%;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type {
margin: 5% 0 0 20%;
}
div {
height: 40px;
width: 40px;
margin: auto;
padding: 10px;
border-style: solid;
display: flex;
float: left;
}
#d1 {
border-style: double dashed;
}
#d2 {
border-style: dotted;
}
</style>
</head>
<body>
<div></div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
The :last-child pseudo class
The CSS :last-child pseudo-class selects an element that is the last child element of some other element. As the name suggests, it will select the last child of its parent. Let us see some examples to implement the :last-child pseudo class.
The following is the syntax for the :last-child class −
:last-child{
/*declarations*/
}
Let?s see an example of the CSS last-child Pseudo class. In this example, we have set a table −
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Score</th>
</tr>
<tr>
<td>99%</td>
<td>95%</td>
<td>97%</td>
<td>92%</td>
</tr>
<tr>
<td>91%</td>
<td>98%</td>
<td>92%</td>
<td>90%</td>
</tr>
</table>
The table is set with the :last-child selector and a right border is set for the <td> and <th>. This will set the right border for the entire table −
td:last-child, th:last-child {
border-right: 2px solid black;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
padding: 10px;
border: hsl(54, 100%, 50%) solid 13px;
border-radius: 6px;
text-align: center;
}
td, th {
border-left: 2px solid black;
border-top: 3px solid black;
}
td:last-child, th:last-child {
border-right: 2px solid black;
}
th {
background-color: lightblue;
border-top: none;
}
caption {
margin-top: 3px;
background-color: purple;
caption-side: bottom;
color: white;
border-radius: 20%;
}
</style>
</head>
<body>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Score</th>
</tr>
<tr>
<td>99%</td>
<td>95%</td>
<td>97%</td>
<td>92%</td>
</tr>
<tr>
<td>91%</td>
<td>98%</td>
<td>92%</td>
<td>90%</td>
</tr>
</table>
</body>
</html>
Pseudo element Selectors
The pseudo element selectors are used to style only a specific part of an element. The following are some of the pseudo element selectors −
::after: Insert something after the content of specific element
::before: Insert something before the content of a specific element
::first-letter: Selects the first letter of a specific element
::first-line: Selects the first line of a specific element
::marker: Selects the markers of list items
::selection: Selects the portion of an element
Let us see some examples to implement the pseudo elements;
The ::first-line pseudo element
The first-line Pseudo Element selects the first line of the content of an element or a container. It is denoted by double colon i.e. −
::first-line
Example
Let us see the example −
<!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>
CSS can help us style the first letter of an element using the ::first-letter pseudo-element. Note that punctuation marks, digraphs and content property can change the first-letter.
The following examples illustrate CSS ::first-letter pseudo-element.
The ::first letter pseudo element
The first letter of all the elements, such as <h2> and <p> here are styled using the ::first-letter pseudo element −
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>
Attribute Selectors
If you want to selector based on attribute and its value, then use the attribute selectors. The following are some of the attribute selectors −
CSS [attribute] Selector
CSS [attribute="value"] Selector
CSS [attribute~="value"] Selector
Let us see some examples
The [attribute] Selector
The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled −
a[target] {
background-color: red;
color: white;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<a href="https://www.tutorialspoint.com" target="_blank">Tutorialspoint</a>
<a href="http://www.tutorix.com">Tutorix</a>
</body>
</html>
The [attribute="value"] Selector
The [attribute="value"] selector selects elements with a specified attribute and value. Here, the attribute is target and the value _blank. The <a> with both this target attribute and _black value is styled −
a[target="_blank"] {
background-color: red;
color: white;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<a href="https://www.tutorialspoint.com" target="_blank">Tutorialspoint</a>
<a href="http://www.tutorix.com" target="_self">Tutorix</a>
</body>
</html>
353 Views
