This document provides an overview of CSS selectors and their uses. It describes the universal selector, element type selector, ID selector, class selector, descendant combinator, child combinator, adjacent sibling combinator, attribute selector, and pseudo-classes. Each selector type is defined and an example is given to illustrate how it can be used to select and style specific elements on an HTML page. Pseudo-classes allow selection of elements based on dynamic states like hover, active, focus, and visited links.

1. (Cascaded Style Sheet Selectors)
Tutorial On
Insert Your Image Here!!
By:
(Dinesh Kumar)
PGT(Computer Science, DPS Bareilly)

2. A CSS selector is the part of a CSS rule set that actually selects the
content you want to style.
Universal Selector
Element Type Selector
ID Selector
Class Selector
Descendant Combinator
Child Combinator
Adjacent Sibling Combinator
Attribute Selector
Pseudo-class
CSS selector Types

3. The universal selector represented by symbol (*)
works like a wild card character, selecting all elements
on a page.
The three lines of code inside the curly braces
(color, font-size, and line-height) will apply to all
elements on the HTML page
Universal Selector
*{
color: green;
font-size: 20px;
line-height: 25px;
}

4. Also referred to as a “type selector,” this selector must
match one or more HTML elements of the same
name.
The following example uses an element type selector
to match all <ul> elements:
Element Type Selector
ul
{
list-style: none;
border: solid 1px #ccc;
}

5. An ID selector is declared using a hash, or pound symbol (#).
This selector matches any HTML element that has an ID
attribute with the same value as that of the selector, but
minus the hash symbol.
This CSS uses an ID selector to match an HTML element such
as:
ID Selector
#container
{
width: 960px;
margin: 0 auto;
}
<div id="container">………</div>

6. The class selector is the most useful of all CSS selectors.
The class selector matches all elements on the page that have
their class attribute set to the same value as the class
selector.
These styles will apply to the following HTML element:
<div class="box"></div>
Class Selector
.box
{
padding: 20px;
margin: 10px;
width: 240px;
}

7. The descendant combinator lets you combine two or more
selectors so you can be more specific in your selection
method.
This declaration block will apply to all elements that have a
class of box that are inside an element with an ID
of container.
Example:
<div id="container">
<div class="box">…..</div>
</div>
Descendant Combinator
#container .box
{
float: left;
padding-bottom: 15px;
}

8. A selector that uses the child combinator is similar to a
selector that uses a descendant combinator, except it
only targets immediate child elements.
This is the same code from the descendant combinator,
but instead of a space character, we’re using the
greater-than symbol.
Child Combinator
#container > .box
{
float: left;
padding-bottom: 15px;
}

9. A selector that uses the adjacent sibling combinator uses
the (+) symbol, and is almost the same as the general
sibling selector. The difference is that the targeted
element must be an immediate sibling, not just a
general sibling.
Adjacent Sibling Combinator
p + p
{
text-indent: 1.5em;
margin-bottom: 0;
}

10. The attribute selector targets elements based on the
presence of HTML attributes, and is declared using
square brackets:
The above CSS would match the following element:
<input type="text">
Attribute Selector
input[type="text"]
{
background-color: #444;
width: 200px;
}

11. The attribute selector can also be declared using just the
attribute itself, with no value, like this:
This will match all input elements with an attribute
of type, regardless of the value.
Attribute Selector…
input[type]
{
background-color: #444;
width: 200px;
}

12. A pseudo-class uses a colon character to identify a
pseudo-state that an element might be in—for
example, the state of being hovered, or the state of
being activated.
This means that when the user hovers their mouse over
an element, the color property for that element will change
to red.
Pseudo-class
a:hover
{
color: red;
}

13. Some of the most frequently used pseudo-classes are as
follows:
:first-child pseudo-class
The :first-child pseudo-class matches an element that is the
first child element of some other element.
Pseudo-class…
div > p:first-child
{
text-indent: 0
}

14. The link pseudo-classes: :link and :visited
• The :link pseudo-class applies for links that have not
yet been visited.
• The :visited pseudo-class applies once the link has
been visited by the user.
Pseudo-class…
a:link { color: blue }
a:visited { color: purple }

15. The dynamic pseudo-classes: :hover, :active,
and :focus
• The :hover pseudo-class applies while the user
designates an element (with some pointing device),
but does not activate it.
• The :active pseudo-class applies while an element is
being activated by the user.
• The :focus pseudo-class applies while an element has
the focus (accepts keyboard events or other forms of
text input).
Pseudo-class…

16. Pseudo-class…
The last selector matches A elements that are in pseudo-
class :focus and in pseudo-class :hover.
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
a:focus { background: yellow }
a:focus:hover { background: white }