Site Discription

Welcome to JalalZoon Website

This is Educational website.You can search for Programming languages mostly HTML, CSS, PHP and Java.This website also contains data about Study Techniques and tips for study effectively. Math tutorials are included very Soon.

Search your content here!!!

Wednesday, May 2, 2018

CSS selectors

CSS Selectors
There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document. The table on the opposite page introduces the most commonly used CSS selectors.

On this page, there is an HTML file to demonstrate which elements these CSS selectors would apply to. CSS selectors are case sensitive, so they must match element names and attribute values exactly.

There are some more advanced selectors which allow you to select elements based on attributes and their values. IE 7 was the first version of IE to support the last two selectors in the table (the sibling selectors), so their use is less common than the other selectors shown here

Code Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<h1 id="top">Kitchen Garden Calendar</h1>
<p id="introduction">Here you can read our
handy guide about what to do when.</p>
<h2>Spring</h2>
<ul>
<li><a href="mulch.html">
Spring mulch vegetable beds</a></li>
<li><a href="potato.html">
Plant out early potatoes</a></li>
<li><a href="tomato.html">
Sow tomato seeds</a></li>
<li><a href="beet.html">
Sow beet seeds</a></li>
<li><a href="zucchini.html">
Sow zucchini seeds</a></li>
<li><a href="rhubarb.html">
Deadhead rhubarb flowers</a></li>
</ul>
<p class="note">
This page was written by
<a href="mailto:ivy@example.org">
ivy@example.org</a> for
<a href="http://www.example.org">Example</a>.
</p>
<p>
<a href="#top">Top of page</a>
</p>
</body>
</html>

Some important slectors are as following!!!

           
Selector
Meaning
Example
Universal Selector
Applies to all elements in the document
*  { }
Targets all elements on the page
Type Selector
Matches element names
h1, h2 , h3 { }
Targets the <h1>, <h2> and <h3>
elements
Class Selector
Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol
.note { }
Targets any element whose class attribute has a value of note
p.note { }
Targets only <p> elements whose class attribute has value of note
ID selector
Matches an element whose id attribute has a value that matches the on specified after the pound or hash symbol
#introduction { }
Targets the element whose id attribute has a value of instruction
Child Selector
Matches an element that is direct child of another
li>a { }
Targets any <a > elements that are children of an <li> element (but not other <a> elements in the page)
Descendant Selector
Matches an element that is a descendent of another specified element ( not just a direct child of that element)
P a { }
Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them
Adjacent sibling selector
Matches an element that is the next sibling of another
h1+p { }
Target the first <p> element after any <h1> element( but not other <p> elements)
General sibling selector
Matches an element that is a sibling of another, although it does not have to be the directly preceding element
h1~p { }
if you had two <p> elements that are siblings of an <h1> element, this rule would apply to both



Type your Comments

Comment Box is loading comments...

Like website using facebook

12th Class Math || Ch 1 Function and Limits || Exercise 1.3 Question no 2

12th Class Math || Ch 1 Function and Limits || Exercise 1.3 Question no 2 12th Class Math || Ch 1 Function and Limits || F.S.C. & I.C.S ...

Contact Us for more help

Name

Email *

Message *