Skip to main content
CSS3- Selectors-Module

CSS3 Selectors Module Part-1

INTRODUCTION

A CSS selector is the part of a CSS rule-set that actually selects the content we want to style.

CSS Syntax :

CSS Syntax

CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

W3C Proposed Recommendation: http://www.w3.org/TR/css3-selectors/

BASIC SELECTORS:

  • H1 { } – The Element/Tag Selectors
  • P { } – The Element/Tag Selectors
  • H1,P { } – The Grouping Selectors
  • .class-name { } – The Class Selectors
  • #unique-id { } – The ID Selectors
  • * { } – The Universal Selectors

BASIC EXAMPLE:

HTML:
<h1>Heading Text</h1>
<p>This is paragraph text.</p>
<span class="class-name">This is CLASS Selector.</span>
<div id="unique-id">This is ID Selector.</div>
 CSS:
h1{color:#F00}
p{color:#00F}
h1,p{border:1px solid red;}
.class-name{background:red; color:white;}
#unique-id{text-decoration:underline;}
OUTPUT:

BASIC SELECTORS

PSEUDO-CLASS SELECTOR:

  • a:link { }
  • a:visited { }
  • a:hover { }
  • a:active { }

 PSEUDO-CLASS EXAMPLE:

HTML:
<p><b>
<a href="https://www.google.co.in/" target="_blank">This is a link</a>
</b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
 CSS:
/* unvisited link */
a:link {color: red;}

/* visited link */
a:visited {color: green;}

/* mouse over link */
a:hover {color: hotpink;}

/* selected link */
a:active {color: blue;}
OUTPUT:

 PSEUDO-CLASS

NEGATION PSEUDO-CLASS SELECTOR:

:not(selector) – selects every element that is not a <p> element

not(selector)

EXAMPLE:

HTML:
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
<a href="https://www.google.co.in/" target="_blank">Link to Google</a>
 CSS:
p{color: black;}
:not(p){color: red;}
 OUTPUT:

NEGATION PSEUDO-CLASS SELECTOR

PSEUDO ELEMENTS:

::first-letter – Selects the first letter of every <p> element

Note : single-colon CSS2 syntax (:first-letter) & double-colon CSS3

syntax (::first-letter)

FIRST-LETTER EXAMPLE:

HTML:
<h4>Pseudo-Elements</h4>
<span>My name is Gourahari.</span>
<p>I live in Bangalore.</p>
<p>Welcome to Trigent Software.</p>
<p>My best friend is Mickey.</p>
<p>Note: The ::first-letter selector can only be used with block-level elements.</p>
<p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-letter instead of ::first-letter).</p>
 CSS:
p::first-letter{font-size: 200%; color: purple;}
OUTPUT:

PSEUDO ELEMENTS

::first-line – Selects the first line of every <p> element

FIRST LINE EXAMPLE:

HTML:
<h4>Swachh Bharat Challenges</h4>
<p>Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</p>
<p>Note: The ::first-line selector can only be used with block-level elements.</p>
 CSS:
p::first-line{background-color: yellow;}
 OUTPUT:

PSEUDO ELEMENTS

::before – Insert something before the content of each <p> element

 BEFORE EXAMPLE:

HTML:
<p>My name is Donald</p>
<p>I live in Bangalore</p>
<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
 CSS:
p::before{content: "Read this -"; background-color:Yellow; color:red;
font-weight: bold;}
 OUTPUT:

Doctype

::after – Insert something after the content of each <p> element

AFTER EXAMPLE:

HTML:
<p>My name is Donald</p>
<p>I live in Bangalore</p>
<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after)</p>
 CSS:
p::after{content: " - Remember this";background-color:Yellow;
color:red; font-weight:bold;}
 OUTPUT:

 CSS

 

 

 

Gourahari Patnaik

Gourahari Patnaik

Gourahari Patnaik works as Software Engineer with Trigent Software. He has 6+ years of experience as a UI Developer/Web Developer, building enterprise web applications. He has strong expertise in HTML5 and CSS3, Bootstrap Responsive Web technologies, JQuery and JavaScript. Gourahari also has experience in W3C Validation and Solving Browser and Device and Mobile compatibility issues along with experience in in SASS framework.