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 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:

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:

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:

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:

::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:

::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:

::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: