CSS Selectors

CSS Selectors in HTML: Part 1

Today, we are going to explore CSS Selectors.

CSS Universal Selector example

The CSS universal selector ( * ) is used to target all elements to apply your specified CSS properties to them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Selectors</title>
<style type="text/css">
*{ color:red;}
</style>
</head>
<body>
<h2>Heading Content....</h2>
<p>Paragraph Content....</p>
</body>
</html>

CSS type Selector example

The CSS type selector ( X { } ) is used to target elements in the document by specific type and apply your specified CSS properties to that type.

<!DOCTYPE html >
<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
h2 { color:#06C; }
p { color:#090; }
</style>
</head>
<body>
<h2>Some Stuff</h2>
<p>Stuff inside my paragraph...</p>
<h2>More Stuff</h2>
<p>Stuff inside my paragraph...</p>
</body>
</html>

CSS group Combinator example

The CSS group combinator ( X, Y { } ) is used to target and style a comma-separated list of elements in a grouped fashion. This allows targeting a group of elements by their native type or by their id and class names.

<!DOCTYPE html>
<html>
<head>
<title>CSs Selectors</title>
<style type="text/css">
h2, p { background:#CAFBE0;}
</style>
</head>
<body>
<h2>Some Stuff</h2>
<p>Stuff inside my paragraph...</p>
<h3>More Stuff</h3>
<p>Stuff inside my paragraph...</p>
</body>
</html>

CSS descendant Combinator example

The CSS descendant combinator ( X Y { } ) is used to target and style descendants of elements using hierarchy logic.

<!DOCTYPE html>
<html>
<head>
<title>CSs Selectors</title>
<style type="text/css">
div p span { color:green;}
</style>
</head>
<body>
<div>
<h3>Some Stuff</h3>
<p>Stuff inside my paragraph...<span>Green Text....</span></p>
</div>
</body>
</html>

CSS adjacent sibling Combinator example

The CSS adjacent sibling combinator ( X + Y { } ) is used to target and style the first elements of a specified type if they happen to be preceded by other specified elements.

<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
h3 + p { font-family:"Comic Sans MS", cursive; text-decoration:underline;}
</style>
</head>
<body>
<h3>Some Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<h3>More Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
</body>
</html>

CSS general sibling Combinator example

The CSS general sibling combinator ( X ~ Y { } ) is used to target and style all elements specified if they happen to be preceded by other specified elements.

<html>
<head>
<title>CSS Selector</title>
<style type="text/css">
h3 ~ p{ font-style:italic; color:Maroon;}
</style>
</head>
<body>
<h2>Some Stuff....</h2>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<h3>Some Stuff....</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
</body>
</html>

CSS class Selector example

The CSS class selector ( X.class { } ) is used to target and style elements that have a common HTML class attribute value in the document.

Using it without specifying an element type in front of it will be a universal element type selection for the class.
Using it with the element type in front of it will affect only that specified type and not others.

All elements class selection example

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
.myclass{ background-color:#bfdfff; padding:10px; border:#06c 1px solid;}
</style>
</head>
<body>
<div class="myclass">Content inside my div....</div>
<p class="myclass">Content inside my paragraph....</p>
<div>Content inside my div....</div>
<div class="myclass">Content inside my div....</div>
</body>
</html>

Element type class selection example

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
div.myclass{ background-color:#bfdfff; padding:10px; border:#06c 1px solid;}
</style>
</head>
<body>
<div class="myclass">Content inside my div....</div>
<p class="myclass">Content inside my paragraph....</p>
<div>Content inside my div....</div>
<div class="myclass">Content inside my div....</div>
</body>
</html>

Notes: Even though the paragraph element has the same class name it does not get styled because it is not the specified element while DIV is the specified element to target only if it has that class name. Also, notice how the other DIV element on the page does not get styled because it does not have the class name of "myClass".

CSS id Selector example

The CSS id selector ( X#id { } or #id { } ) is used to target a unique element in the document. Only one HTML element may be given a unique ID attribute value in your web document, so naturally, this is meant for unique element targeting as opposed to grouped or class styling of elements. If the element type is not specified in front of the "#" symbol then any type of element in the document given this ID attribute value will be styled.

If the element type is specified, only that type of element in the document can be styled, while other types of elements that may be given the unique id will be excluded from styling. The ID selectors can be used in conjunction with other selectors to extend its reach into the document.

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
h3#myUnique1{ background-color:#bfdfff; padding-left:10px; border:#06c 1px solid;}
</style>
</head>
<body>
<h3 id="myUnique1">My heading content....</h3>
<h3>My heading content....</h3>
</body>
</html>

The following example demonstrates how you can target any tag by the unique ID attribute value, regardless of the element type, by excluding the type specifier before the "#" symbol. In the example above, the element type must be "h3" in order to be styled.

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
#myUnique1{ background-color:#bfdfff; padding-left:10px; border:#06c 1px solid;}
</style>
</head>
<body>
<h3>My heading content....</h3>
<p id="myUnique1">My heading content....</p>
</body>
</html>

CSS after Selector example

The CSS after pseudo-element selector ( X:: after { } ) is used to generate content to the targeted element or elements directly after the content inside of them renders. Reference the content property to see possible values of content types that can be generated, you can generate more than just string content.

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
h3::after{ content:" is love";}
</style>
</head>
<body>
<h3>Joy</h3>
<h3>Fun</h3>
<h3>Respect</h3>
</body>
</html>

CSS before Selector example

The CSS before pseudo-element selector ( X:: before { } ) is used to generate content to the targeted elements directly before the content inside the element is rendered. Reference the content property to see possible values of content types that can be generated, you can generate more than just string content.

<html>
<head>
<title>CSS Selectors</title>
<style type="text/css">
p::before{ content:"String....";}
</style>
</head>
<body>
<p>Paragraph Content....</p>
<p>Paragraph Content....</p>
<p>Paragraph Content....</p>
</body>
</html>

CSS first-line Selector example

The CSS first-line pseudo-element selector ( X::first-line { } ) is used to target the first line within elements.

<!DOCTYPE html>
<style type="text/css">
p::first-line {
color:#F00;
}
</style>
<p>My paragraph content...<br /> keeps going...<br />and going...</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

CSS first-letter example

The CSS first-letter pseudo-element selector ( X::first-letter { } ) is used to target and style the first letter within elements.

<!DOCTYPE html>
<style type="text/css">
p::first-letter {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #09C;
}
</style>
<p>Once upon a time on a website...</p>
<p>Later that same afternoon a great big...</p>

CSS not Selector example

The CSS not negation pseudo-class selector ( X:not(Y) ) is used to NOT select a specified element type. Use it to exclude a specified element in an otherwise full sibling selection.

<!DOCTYPE html>
<style type="text/css">
#myDiv *:not(p)
{
color:#09C;
}
</style>
<div id="myDiv">
<h3>My heading content</h3>
<h4>My heading content</h4>
<p>My paragraph content...</p>
<p>My paragraph content...</p>
</div>

CSS active Selector example

The CSS active user action pseudo-class selector ( X: active { } ) is used to alter the style of an element at the time of user interaction, usually a click action. The active selector is most commonly used to change the way a menu item or button appears the exact instant it is clicked and remains that style until the user releases their mouse button.

<!DOCTYPE html>
<style type="text/css">
.myClass:active {
font-size:24px;
color:Red;
}
</style>
<p class="myClass">My paragraph content...</p>
<p>My paragraph content...</p>

Demo Hint: To see the effect of this click my first paragraph below and watch it grow.

CSS hover Selector example

The CSS hover user action pseudo-class selector ( X: hover { } ) is used to alter the style of an element when the user mouse hovers over an element on the page. The hover selector is most commonly used to change the way a menu item or button appears when the user mouse hovers over it.

<!DOCTYPE html>
<style type="text/css">
.myList li {
background:#000;
padding:12px;
margin:4px;
color:#fff;
}
.myList li:hover {
background:red;
padding:12px;
margin:4px;
color:#000;
}
</style>
<ul class="myList">
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
</ul>

Demo Hint: To see the effect of this hover your mouse over my list elements.

Summary

This article enriches the knowledge of CSS.