Using Selectors In CSS With Examples

If you are new to CSS you may find trouble of using examples, I've written CSS and HTML together; pls check this link it might help you in solving that problem. For intermediate and advanced learner, there would be no problem. Below examples are all checked in a browser and they work. I used Atom editor and Google Chrome browser (sometimes Safari too) for below examples.

Tag selector

These tags (body, h1, div, aside, article, etc.,) are HTML elements, they could be selected directly without putting any period (.), hash (#) or asterisk (*). See example below:

body {
background-color: #ddd;
color: #E06C6F;
}

Class selector

A CSS class start with a period, and you can assign a CSS class to a number of HTML elements.

.orange {
color: #f3360c !important;

}

Using same Class for different result

.orange {
color: red;
background-color: yellow;
}

p.orange {
color: green;
}

<h1 class="orange"> Heading </h1>
<p class="orange"> This is a paragraph </p>

First we wanted our text to be red, later on without changing Class we thought to change paragraph color to be green, so we used "p.orange" to select that paragraph and the Class.

Multiple classes

You may use multiple classes (single-space-separated) for an element, check below example:

.good {color: red;}
.bad {text-decoration: underline;}
.ugly {background-color: yellow;}
.the-movie {text-transform: capitalize;}

<p class="good bad ugly the-movie">
This is a paragraph.
</p>

ID selectors

ID is unique to each element, like Class you can't assign same ID to many elements. It is exactly works like Class, only Hash (#) is used instead of Period (.).

#orange {
color: #f3360c !important;
}

Using same ID for different result: it works exactly like Class (see above example, you just need to replace PERIOD with a HASH. But thing is we can't use same ID for more than one element, so better use Class.

Group selector

You can select many Tags, IDs and Classes all at once, check below example:

p, .orange, h1, #title {
color: #f13e08; /*red*/
}

<h1> This is a heading </h1>
<h2 class="orange"> This is second heading</h2>
<h3 id="title"> This is third heading</h3>
<p> This is a paragraph </p>

Asterisk (*) selector

It is called Wild Card or Universal selector for all HTML Tags (not for ID and Class), it selects every Tag. See example: h1, h2, h3 and p, all turn blue in text color.

* {
color: blue;
}

<h1> This is a heading </h1>
<h2> This is second heading</h2>
<h3> This is third heading</h3>
<p> This is a paragraph </p>

Descendent selectors

It is combination of two or more selectors, each is separated by a space (single space). In above example where we used "p.orange for color green" wasn't Descendent selector, 'coz there was no hierarchy in it.

Example 1 with Class and Tag

.post {
background-color: yellow;
}

.post h1 {
color: red;
}
.post p {
color: blue;
}

<div class="post">
<h1>Heading</h1>
<p>This is a paragraph.</p>
</div>
<p>This is second paragraph.</p>

Example 2 with Class and Class

.post {
background-color: yellow;
}

.post .head {
color: red;
}
.post .para {
color: blue;
}

<div class="post">
<h1 class="head">Heading</h1>
<p class="para">This is a paragraph.</p>
</div>
<p>This is second paragraph.</p>

Child selector

Select all the children of same parent. Space between selectors is optional "p > strong" and "p>strong" work in the same way.

p > strong {
color: red; /*select all the children of p*/
}

<div>
<p> This is <strong>very</strong> beautiful.</p>
<p> <strong> And</strong> </p>
<p> This is <em>really <strong>very</strong> </em>beautiful.</p> 
</div>

Difference between Descendant and Child selector

In above example "third paragraph" doesn't get selected 'coz it's not child of <p> element, but if you use below CSS for Descendant, all the paragraphs get selected.

p strong {
color: red; /*select all the descendants of p*/
}

Child selector again (pseudo classes)

:first-child, :last-child, :nth-child(), :first-of-type, :last-of-type, :nth-of-type()
In below example I tried to explain child-pseudo-classed in CSS comments.

p:first-child{color: red;} /*first child of other element*/
p:last-child {color:blue;}/*last child of other element*/
li:nth-child(3) {color: green;} /*third child of other elment*/
li:first-of-type {text-transform: uppercase;} /*works like first-child*/
li:last-of-type {color: yellow;} /*works like last-child*/
li:nth-of-type(2) {color: red;} /*works like nth-child()*/

<div>
<p>Hello God! Where do you live?</p>
<ul>
<li>in sky? </li>
<li>above sky?</li>
<li>beyond the <strong>sky?</strong></li>
<li>perhaps at some distant star?</li>
</ul>
<p>I am not able to <strong> understand.</strong></p>
</div>

<div>
<p>God didn't answer, so I assume.</p>
<ul>
<li>It'll take time. </li>
<li>I'm not old enough.</li>
<li>I didn't ask <strong>correctly</strong></li>
<li>I'll ask again.</li>
</ul>
<p>Some day I'll get <strong>the answer.</strong></p>
</div>

Adjacent Sibling selector

Select the second selector only, if both are the children of same parent. Space between selectors is optional "h1 + p" and "h1+p" work in the same way.

h1+p {
color: red; /*only first paragraph turns red*/
}

<div>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p> This is second paragraph</p> 
</div>

Pseudo Classes and Elements

They are built in Classes and Elements that's why they are called "Pseudo (just for a name sake)"; you just start using them.

Pseudo Classes

Rule- single colon (:) is used.
Usage- selector:pseudo-class {property:value;}
Few are- a:link, a:visited, a:hover (or, selector:hover), selector:focus (mainly used for input field, ie., input:focus), a:active
Others are experimental (not for production), so I'm leaving them for now.

Example (a:link, a.class:link or .class:link)
It helps in changing the color of a hyperlink (which is blue by default).

a:link {
color: red;
}

a.ext:link {
color:green; /*you may also use .ext:link*/
}

<a href="http://example.com/"> a link</a><br />
<a href="http://example.com/" class="ext"> a link with class</a>

Example (a:visited, a.class:visited or .class:visited)
It helps in changing the color of already visited hyperlink.

a:visited {
color: yellow;
}

a.ext:visited {
color:red; /*you may use .ext:visited also*/
}

<a href="http://example.com/"> a link</a><br />
<a href="http://example.com/" class="ext"> a link with class</a>

Example (a:hover, a.class:hover or selector:hover)

Hover for hyperlinks

a:hover {
background-color: #ddd;
}

a.ext:hover {
color: #fff;
background-color: #000;
}

Hover for other selectors

body:hover {
background-color: #f7f7f7;
}

p:hover {
background-color: pink;
}

.para:hover {
color: white; /* you may use .para:hover also*/
background-color: red;
}

<body>
<p> This is a paragraph </p>
<p class="para"> This is second paragraph </p>
</body>

Example (input:focus or selector:focus)

input:focus {background-color: yellow;}
input.ok:focus {color:#fff; background-color: black;} /*you may also write .ok:focus also*/

Example (a:active)

It comes into action the moment a person clicks on a hyperlink and hold on to that (without releasing the mouse).

a:active {color: green;}

<a href="http://www.example.com"> Visit this website </a>

Pseudo Classes with Descendant Selectors

nav a:link { color: red;}
.social-links a:link {color: green;}
/* likewise you can do for :hover, :visited, :active*/

<nav>
<a href="#home"> Home </a> | <a href="#about"> About</a>
</nav>
<br />
<div class="social-links">
<a href="#twitter"> Twitter </a> | <a href="#facebook"> Facebook </a>
</div>

Pseudo Elements

Rule- double colon (::) is used in CSS3.
Usage- selector::pseudo-element {property:value;}
Few are- ::after, ::before, ::first-letter, ::first-line, ::selection
Others are (which I'm not using)- ::cue, ::backdrop, ::placeholder, ::marker, ::spelling-error, ::grammar-error.

Example (::after)

p::after {
content: " And nothing more."
}

<p> This is a paragraph. </p>

Example (::before)

(1)

p::before {
content: " Yes."
}

<p> This is a paragraph. </p>

(2)

p.happ::before {
content: " Yes."
}

<p class="happ"> This is a paragraph. </p>

Example (::first-letter)

p::first-letter {
color: red; font-weight: 900;
}

<p> This is a paragraph. </p>

Example (::first-line)

p::first-line {
color: red; font-style: italic;
}

<p>
This is a first line. <br />
This is second line. <br />
This is third line. <br />
</p>

Example (::selection)

This CSS works when we select some text, in below example, after selection text turns red with black background.

p::selection {
color: red; background-color: black;
}

Attribute selectors

Usage- selector[attribute]{property:value;}

In attribute selectors, there are three things (though they are many) to understand first: ^,$, and *.

^="to begin with", $="to end with", *="match this". Lets start with an easy example.

Easy example

a[href="http://example.com/"] {color: red;}

<a href="http://example.com/"> Visit example.com</a>

Now let's check out ^, $ and * just by an example.

a[href^="https"] {color: green;}
a[href*=".pdf"] {color: red;}
a[href$=".gif"] {color: yellow;}

<p>
<a href="https://example.org/"> Visit example.org</a> <br />
<a href="http://example.com/some.pdf"> Download pdf</a> <br />
<a href="http://example.com/img.gif"> Download a gif image </a>
</p>

Attribute selectors are good in placing a little "hyperlink or pdf" image before the beginning of the text, and this is possible by using "background-image" property in CSS.

More example for Attribute Selectors

Example (Tag[class])

p[class]{font-size: 50px;}
.good {color: red;}
.bad {text-decoration: underline;}

<p class="good bad">
This is a paragraph.
</p>

Example (Tag[alt])

img[alt]{border: 5px solid red;}

Example (*[title])

*[title]{color: red;}

<h1 title="Hi!"> Heading 1</h1>
<p title="Hello!"> Hover over this line. </p>

Example (*[href][title])

*[href][title]{text-transform: uppercase;}

<p>
<a href="http://example.com/" title="go baby"> visit this </a>
</p>

One last thing

To check browsers support to selectors, pls visit: https://www.quirksmode.org/css/selectors/ and https://caniuse.com/. If you prefer other websites pls let me know in comments.

My Rough Drafts

Search This Blog