Batch 12

EXPLORING CSS SELECTOR

A selector is a pattern that is used to select
to apply the css style rules
Selector can be used as a condition
The css rule is divided into two parts
1. Selectors
2.Declaration
 The rules defined in the declaration part
are applied the element specified by the
selector the different types of selectors
are the follows
 The universal selector
 The type selector
 The class selector
 The id selector
 The child selector
 The descendant selector
 The adjacent sibling selector
 The attribute selector
 The query selector

1
Batch 12

THE UNIVERSAL SELECTOR:

The universal selector selects the all the elements that are present in a
html document you can use this selector to apply the same rule to all the
elements of an html it is represented by an asterisk symbol (*{}).

SYNTAX: *{

margin:0;

padding:0;

THE TYPE SELECTOR:

The type selector matches all the elements specified in a list with the
given value to determine the elements to which the CSS rules

SYNTAX:

P, h2, h3 {font-size:30px}

THE CLASS SELECTOR:

The class selector allows you to apply CSS rules to the elements that
carry a class attribute whose value matches with the class attribute
specified in the selector

SYNTAX :<h1 class=”intro”>Header 1</H1>

Applying the CSS rule to all the elements that have the class attribute of
the same value .The following code snippet shows how to apply the CSS
rule

SYNTAX: .intro {font-family :fantasy}

Applying the CSS rule to the H1 element whose class attribute contains
into as its value the

Following code snippet shows how to apply the CSS style on H1element

SYNTAX: h1.intro{font-family :fantasy}

2
Batch 12

THE ID SECTOR:

The value of the id attribute is unique with in a document; therefore the

selector is applied only to the content of one element the following code
snippet shows the h1 element having my Header as the value of the
attribute

SYNTAX:

<H1 id =”selector”>Hello World!</H1>

The following code snippet shows the id selector ,which is represented by a

hash symbol(#)and

Followed by the value of the id attribute

SYNTAX:

#selector{font-color:green}

THE CHILD SELECTOR:

The child selector matches the element that is an immediate child of another
element.

Selector greater than symbol(>) is used as the combinator

SYNTAX:

table>th{font-family: sans-serif}

A combinator is a symbol ,such as >,<and + which shows the relationship

between two elements

THE DESENDANT SELECTOR:

The descendant selector matches an element that is a descendant of another

element .A descendant element is an element that is nested inside another
element.

Selector white space is used as the combinator as shown in the following code
snippet

SYNTAX: table th{font-family :sans-serif}

THE ADJACENT SIBLING SELECTOR :

the adjacent sibling selector selects all the elements that are adjacent siblings
of a specified element.Sibling elements must have the same parent element .The
word adjacent means side-by-side so no other element could exist between that
adjacent sibling element

3
Batch 12

SYNTAX:

H2+p{font-weight:bold}

Lets apply the preceding code snippet of a CSS file to the following HTML code
snippet

<H2>Heading</H2>

<p>the selector above matches this paragraph</p>

<p>the selector above does not match this paragraph</P>

THE ATTRIBUTE SELECTOR:

The CSS attribute selector selects elements on the basis of some specific
attributes or attribute values table lists the most common type of attribute

Selectors.

Name Syntax Match Example

Hyphen selector [attribute|=value] Matches if the [lang|=fr]{
element has an Background-color:red;
attribute }
followed by a
hyphen
Existence [attribute] Matches if a[title]{
selector element has Color:green;
specific }
attribute
Equality [attribute=value] Matches if the a[href=http://wp.com/]
selector element has an {
attribute with a Font-color:pink;
specific value }
Space selector [attribute~=value] Matches if A[title~=web]
element has an {
element with Background-color:cyan;
space separated }
items that
match with the
value

THE QUERY SELECTOR:

The querySelector() and querySelectorAll() methods accept CSS selectors as

parameters and return the matching element node in document tree

4
Batch 12

<html>

<head>

<title>css example</title>

<link rel="stylesheet"type="text/css"href="example.css">

<a href="www.google.com" title="google">this is a link with

title attribute</a>

<a href="www.wp.com">this is a link without title

attribute</a>

</head>

<body>

<div id="div">

<h1 class="code1">this is first heading</h1>

<h2>this is second heading</h2>

<h3>this is third heading</h3>

<p>this is paragraph</p>

<p id="code2">this is second paragraph</p>

<p>this is third paragraph</p>

</div>

<table border="0">

<tr>

<th>living being</th>

<th>sheleter</th>

5
Batch 12

</tr>

<tr>

<td class="code">lion</td>

<td>lion lives in the den</td>

</tr>

<tr>

<td class="code">man</td>

<td>man lives in house</td>

</tr>

<tr>

<td class="code">fish</td>

<td>fish lives in water</td>

</tr>

<tr>

<td class="code">bird</td>

<td>bird lives in the nest</td>

</tr>

</table>

</body>

</html>

6
Batch 12

Result:

Code of css file:

*{margin:10; }

body

color:purple;

background-color:#fff00;

background-image:url(image3.jpg);

background-size:cover;

.code1

7
Batch 12

font-family:sans-serif;

h2,h3{font-style:italic}

p{font-size:12pt}

table

background-color:magneta;

border-style:solid;

border-width:2px;

border-color:magneta;

th

background-color:pink;

font-weight:bold;

padding:3px;

td{padding:3px}

.code

font-size:10pt;

font-family:fantasy;

8
Batch 12

font-weight:lighter;

#code2

text-decoration:overline;

p[id]

color:grey;

a[title]

color:grey;

div>p{color:orange}

table th{color:blue}

#div h3+p{background:grey}

Working with the querySelector() method :

<!doctype html>

<html>

<head>

9
Batch 12

<title>working with queryselector</title>

</head>

<body>

<h1>working with queryselector</h1>

<div id="div1" style="padding:50px; width:100px;

height:100px;border:1px solid black">

</div>

<p> move the cursor over color name</p>

<label id="label1"> blue</label>

<label id="label2"> red</label>

<label id="label3"> yellow</label>

<input id="text">

<script type="text/javascript">

if(document.querySelector)

var lb1=document.querySelector('#label1')

var lb2=document.querySelector('#label2')

var lb3=document.querySelector('#label3')

lb1.onmouseover=function()

10
Batch 12

document.querySelector('#text').value="this is
blue color";

document.querySelector('#text').style.color="blue";

document.querySelector('#div1').style.background="blue"

lb2.onmouseover=function()

document.querySelector('#text').value="this is
red color";

document.querySelector('#text').style.color="red";

document.querySelector('#div1').style.background="red"

lb3.onmouseover=function()

document.querySelector('#text').value="this is
yellow color";

document.querySelector('#text').style.color="yellow";

document.querySelector('#div1').style.background="yellow"

11
Batch 12

</script>

</body>

</html>

Result:

12
Batch 12

Working with querySelectorAll()

Code:

<!DOCTYPE HTML>

<head>

<Title>working with queryselecionall</TITLE>

</HEAD>

<BODY>

<H1>working with the selectionAll</H1>

<FORM id="myform">

<B>selct your favourite flowers:</B><BR/>

<INPUT name="flowers" type="checkbox" value="rose" />rose <BR/>

<INPUT name="flowers" type="checkbox" value="lilly" />lilly<BR/>

<INPUT name="flowers" type="checkbox" value="jasmine"

/>jasmine<BR/>

<INPUT type="submit"/>

</FORM>

<SCRIPT type="text/javascript">

if(document.querySelector)

docment.queryselector('#myform').onsubmit=function()

13
Batch 12

var
checkflowers=this.querySelectorAll('input[name="flowers"]:checked')

document.write("<B>you have selected the following flowers:

</B></BR>")

for(vari=0;i<checkflowers.length;i++)

var value=""value +=checkflowers[i].value+ "<BR/>"

document.write("<LI>"+value+"<Li/>" )

return false

</SCRIPT>

</BODY>

</HTML>

Result:

14
Batch 12

15