Any tag can serve as a CSS selector, and the rules associated with that selector will be applied to all instances of that tag the page. You can add a rule to the <b> tag that sets the font weight to normal if you choose to do so, or you italicize every paragraph on your page by applying a style to the <p> tag.
Applying styles to the <body> tag using the body selector enables you to apply page wide setting. However, you can apply styles on a more granular basis in a number of ways and apply them across multiple types of elements using single selector.
First, there's way to apply styles to more than one selector at the same time. Follow this example:
p, ol, ul { color: red; }
A comma- separated list indicates that the style rule should apply to all the tags limited. The preceding rule is just an easier way to write the following:
p { color: red; }
ol { color: red; }
ul {color: red; }
👉Contextual Selectors
Contextual selectors are also available. These are used to apply styles to elements only when they are nested within other specified elements. Context is based on the hierarchical structure of a document, which involves relationships between a parent element containing one or more child elements and within those child elements several levels of descendant elements. Take a look at this rule:
p em { color : blue; }
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<style>
p{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<h2> CSS Contextual Selectors </h2>
<p> Contextual Selectors are also available </p>
<p> Context is based on the hierarchical structure of a document </p>
<div>
<p> Considers the context where the style is to be applied </p>
</div>
</body>
</html>
👉Element Selector
The element selector selects elements based on the element
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<style>
p{
background-color: aqua;
}
</style>
</head>
<body>
<h2> CSS Element Selectors </h2>
<p> This is a paragraph </p>
<div> This is div element </div>
<p> This is a new paragraph </p>
</body>
</html>
👉Element Selector
The id selectors is for assigning identifiers to unique elements.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<style>
#myfirstid{
color: purple;
}
</style>
</head>
<body>
<h2> CSS Element Selectors </h2>
<p id = "myfirstid"> This is a paragraph </p>
<div> This is div element </div>
<p> This is a new paragraph </p>
</body>
</html>
👉Class Selectors
The class selectors is used to classify elements.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<style>
.myfirstclass{
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<h2> CSS Element Selectors </h2>
<p> This is a paragraph </p>
<div> This is div element </div>
<p class = "myfirstclass"> This is a new paragraph </p>
</body>
</html>
👉Grouping Selectors
The grouping selectors is separate each other selector with a comma.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Selectors </title>
<style>
h2, footer{
color: orange;
background-color: black;
}
</style>
</head>
<body>
<h2> CSS Element Selectors </h2>
<p> This is a paragraph </p>
<div>
<p> This is a new paragraph </p>
</div>
<footer> This is footer </footer>
</body>
</html>
NOTES.....
One common mistake is to include the . when assigning classes or the # when assigning IDs. The punctuation should only be used in the style sheet. In the attributes, leave them off. So id = "primary" is correct; id = "#primary" is not and class = "primary" is correct; class = ".primary" is not.
