Table of Contents
Element Selectors
There are different element selectors from which you can select any HTML element and apply CSS rules for them. Using element selectors, simplest rules can be applied to all documents of a particular tag such as <p>, <h1>, <h2> etc. You can apply element selectors as the following.
syntax: element-name{/*properties*/}
As an example, to set the line spacing for all paragraphs, you can use a rule such as the following.
Example: p{line-height:150%;}
Demo:
CSS code: h4{color:blue;} /*makes all h4 tags blue */
HTML code: <h4>This is first h4 tag</h4> <h5>This is second h5 tag</h5>
To set values for all elements, the wildcard selector * can be used. For example to remove margins on all elements, use
Example: *{margin:0;}
Demo:
CSS code: *{color:blue;}
HTML code: <p>This is a paragraph</p> <h5>This is a h3 tag</h5>
If you have to set values for more than one but fewer than all elements, you can group elements by separating them with a comma. For example if you want the tags <h4>, <h5>, and <h6> to have the same basic background and color, you can apply the following rule.
Example: h4, h5, h6 {background-color:yellow; color:black;}
Demo:
CSS code: h4, h5, h6 {background-color:yellow; color:black;}
HTML code: <h4>This is h4 tag</h4> <h5>This is h5 tag</h5> <h6>This is h6 tag</h6>
Id Selectors
With element selectors, you can select any HTML element or tags and apply CSS rules while with applying and Id rule, you can apply a style just for a single element or tag. Using Id selectors, simplest rules can be applied to a single tag such as <p id=”top”>, <h1 id=”first”> etc. You can apply Id selectors as the following.
syntax: #Id_value{/*properties*/}
As an example, to set the font color “red” for a paragraph with Id “top”, you can use the rule as the following.
Example: #top{color:red;}
Demo:
CSS code: #top{color:red;}
HTML code: <p id="top">Paragraph with id top is red</p> <p id="bottom">This paragraph is not red</p>
If you have to select specified element E with the given id attribute set, you can apply a style just for a given tag with given id value. For example if you want to set the color to red on the h3 tag with the id equal to contact, you can apply the following rule.
Example: h3#content{background-color:yellow;}
Demo:
CSS code: h3#content{background-color:yellow;}
HTML code:<h3 id="content">Its background is yellow</h3> <h4 id="content">Background is not yellow</h4>
Class Selectors
Using class selectors you can select all tags with the specified class value. Unlike id values, class values don’t have to be unique because many elements can be members or the same class. You can write selector rules for classes by simply specify the class name of your own choosing, such as “nature”, with the period before it as the selector. You can apply class selectors as the following rule.
syntax: .class{/*properties*/}
As an example, to set the background color “green” for a paragraph with class “nature”, you can use the rule as the following.
Example: .nature{background-color: green;}
Demo:
CSS code: .nature{background-color: green;}
HTML code: <p class="nature">This p tag background is green</p> <div class="nature">This div tag background also green</div>
If you have to select all elements with the given class attribute sets, you can apply style for all the tags with given class value. For example if you want to underline all h1 tags with class “note”, you can apply the following rule.
Example: h1.note{text-decoration: underline;}
Demo:
CSS code: h4.note{text-decoration: underline;}
HTML code: <h4 class="note">This heading is underlined</h4> <h5 class="nature">This heading is not underlined</h5>
General Descendant Selector
You can select descendant HTML tag using general descendant selector, where one element is eventual descendant of another element. You can write selector rules for descendant selector by simply writing descendant tags, such as <strong> tag which is descendant of <p> tag. You can apply descendant selectors as the following rule.
Syntax: tag1 tag2 {/*properties*/}
As an example, to set the color “purple” for a strong tag that are descendant of p tags, you can use the rule as the following.
Example: p strong {color:purple;}
Demo:
Direct Descendant Selector
You can select immediate parent of HTML tag using direct descendant selector, where one element is direct descendant of another element. You can write selector rules for direct descendant selector by simply writing descendant tags, such as <p> tag which is descendant of <body> tag. You can apply descendant selectors as the following rule.
Syntax: tag1>tag2 {/*properties*/}
An an example, to make all p tags that have the body tag as their immediate parent have the background color pink.
Example: body>p {background-color:pink;}
Demo:
Adjacent Sibling Selectors
Adjacent sibling selectors has a similar rule to direct descendant selector, which is specified using the plus sign (+) and is used to select elements that would be siblings of each other. You can apply adjacent sibling selectors as the following rule.
Syntax: tag1+tag2 {/*properties*/}
Here is an example to make all p tags that are immediately preceded by an h1 tag pink.
Example: h1+p {background-color:pink;}
Demo:
General Sibling Selectors
General sibling selector is a CSS3 selector(~) that can be used to select elements that happen to have a particular element preceding them as a sibling directly. You can apply general sibling selectors as the following rule.
tag1~tag2{/*properties*/}
Here is an example, to set the font style to italic on all strong tags that have a p tag as a preceding sibling.
Example: p~strong{font-style: italic;}
Demo:
Read Next: How to Design Webpages using CSS Attribute Selectors
