Group 9

PRESENTATION

CSS SELECTORS
 Members

Paula Paulino Rolly Nicor Tina Perez Johari Narvaza

 Learning Objective’s

Learn the Learn what Learn what are Learning how Learning the
individual are the the different to successfully difference
selector code applications codes for use between
and their selector code CSSselector these codes pseudo-
specific classes and
functions pseudo-
elements
WHAT IS CSS
SELECTORS?
css selector

It is a vital part in css used for identifying

and selecting tags or elements.

It is split into 5 topics:

Simple Psuedo-
Combinator element
Pseudo-class Attribute
simple selector

It is one of the simplest selector out of the 5,

and are one of the most used selector in
CSS
simple selector

CSS element selector : selects all elements

in the html that has that element

syntax:

selector{property: value;}
EXAMPLE
simple selector

id selector: it is used to specify a element by

giving it a name of its own and it uses a
hashtag(#) to use it in css (note: you cant
have the same name for two element)

html syntax:
<element id=”name”>
css syntax:
#name { property: value; }
EXAMPLE
simple selector
class selector: it is used to specify a group of
elements by adding class=”” in the element
so you can change multiple elements at
once we use a period in css to use the
selector

html syntax:
<element class=”name”>
css syntax:
.name { property: value; }
EXAMPLE
simple selector
universal selector: it selects all element no
matter the class or id and it uses (*)

css syntax:
*name { property: value; }
simple selector
grouping selector: this can have different
elements be selected and have the same
property so the code wont be to big because
of the separate css and it uses (,)

css syntax:
element, element, element{ property: value; }
CSS PSEUDO
CLASS
PSEUDO-CLASS

It is used to change the state and behavior

of a tag. Pseudo-class can do a lot of things,
for example; you want a tag to change color
when hovered, you can also use it to
change the color of an anchor tag and
when the url has been visited or not.

Example
PSEUDO-CLASS

CSS syntax:
selector: pseudo-class{ property: value; }
pseudo-class descripition

:hover when mouse hovers it activates the property

:active Selects the active link

:visted when the url has been visited the property will activate

:link the property will activate when the url has been visited
exammples:
exammples:
pseudo-class descripition

:first-child it selects the first child of a parent

:last-child it selects the last child of a parent

:nth-child() you can input a specific number to select a specific child

:only-child
it only selects a parent with only one child
exammples:
exammples:
 pseudo-class descripition

:nth-last-child() it counts backwards from the bottom of the parent

The :checked selector matches every checked <input> element (only for radio buttons
:checked
and checkboxes) and <option> element.

:disabled The :disabled selector matches every disabled element (mostly used on form elements).

:empty it selects parents that has NO CHILD

examples:
Examples:

:disabled
:empty
pseudo-class descripition

The :enabled selector matches every enabled element (mostly used on form
:enabled
elements).

:first-of-type The :first-of-type selector matches every element that is the first child, of a
particular type, of its parent.

The :in-range selector selects all elements with a value that is within a specified
:focus
range.

The :in-range selector selects all elements with a value that is within a specified
:in-range
range.
:enabled
:first-of-type
:focus
:in-range
pseudo-class descripition

The :invalid selector selects form elements with a value that does not validate
:invalid
according to the element's settings.

The :lang() selector is used to select elements with a lang attribute with the
:lang()
specified value.

The :last-of-type selector matches every element that is the last child, of a
:last-of-type
particular type, of its parent.

The :not(selector) selector matches every element that is NOT the specified
:not()
element/selector.
:invalid
:lang()
:last-of-type
:not()
 pseudo-class descripition

The :nth-last-of-type(n) selector matches every element that is the nth child, of a
:nth-last-of-type()
particular type, of its parent, counting from the last child.

The :nth-of-type(n) selector matches every element that is the nth child, of
:nth-of-type()
the same type (tag name), of its parent.

The :only-of-type selector matches every element that is the only child of its
:only-of-type
type, of its parent.

The :optional selector selects form elements which are optional.

:optional
Form elements with no required attribute are defined as optional.
:nth-last-of-type()
:nth-of-type()
:only-of-type
:optional
pseudo-class descripition

The :out-of-range selector selects all elements with a value that is outside a
:out-of-range
specified range.

:read-only The :read-only selector selects elements which are "readonly".

The :read-write selector selects form elements which are "readable" and
:read-write
"writeable".

The :required selector selects form elements which are required.

:required
Form elements with a required attribute are defined as required.
:out-of-range
:read-only
:read-write
:required
pseudo-class descripition

The :root selector matches the document's root element.

:root

The :valid selector selects form elements with a value that validates according to
:valid
the element's settings.

URLs with an # followed by an anchor name link to a certain element within a

:target document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
:root
:valid
:target
PSEUDO-
ELEMENTS USED TO STYLE
specified parts of an element.
For example, it can be used to:
Style the first letter, or line,
of an element. Insert content
before, or after, the content
of an element.
 PSEUDO-ELEMENT

A CSS pseudo-element is a keyword

added to a selector that lets you style a
specific part of the selected element(s).

SYNTAX:
selector : : pseudo-element{property:
value;}
 PSEUDO-ELEMENT

For example, ::first-line can be used to

change the font of the first line of a
paragraph.

EXAMPLE:
p : : first-line {color : blue;}
pseudo-class descripition

The ::after selector inserts something after the content of each selected
element(s). Use the content property to specify the content to insert.
::after Use the ::before selector to insert something before the content.
Example: h1::after {
content: url(Image); }

The ::before selector inserts something before the content of each selected
element(s). Use the content property to specify the content to insert.
::before
Use the ::after selector to insert something after the content.

The ::first-letter selector is used to add a style to the first letter of the specified
selector
::first-letter p::first-line {
color: #ff0000;
font-variant: small-caps; }

The ::first-line selector is used to add a style to the first line of the specified
::first-line
selector.
pseudo-class descripition

The ::marker selector selects the marker of a list item.

This selector works on any element set to display:list-item.
Example: ::marker {
::marker
Color: red
font-size: 24px; }
<ul> <li>tea</li> </ul>

The ::selection selector matches the portion of an element that is selected by a

user.
Only a few CSS properties can be applied to the ::selection selector: color,
::selection
background, cursor, and outline.
Example: ::Selection {
color: red
background: yellow; }
CSS Combinator
 CSS combinator
A CSS selector can contain more than
one simple selector. Between the simple
selectors, we can include a combinator.
There are four different combinators in
CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
 CSS combinator

css syntax:
element combinator element{property:value;}
 CSS combinator

descendant select: The element

element selector is used to select
elements inside elements.

syntax:
element element{property:value;}
EXAMPLE
 CSS combinator

Child Selector (>): The element >

element selector is used to select
elements with a specific parent.

syntax:
element > element{property:value;}
EXAMPLE
 CSS combinator

Adjacent Sibling Selector (+)

: The element+element selector is
used to select an element that is
directly after another specific
element.

syntax:
element + element{property:value;}
EXAMPLE
 CSS combinator

General Sibling Selector (~)

: The element1~element2 selector matches
occurrences of element2 that are preceded by
element1.
Both elements must have the same parent, but
element2 does not have to be immediately
preceded by element1

syntax:
element ~ element{property:value;}
EXAMPLE
GROUP 9 GROUP 9

REMEMBER THIS:
CSS SELECTOR
always remember the different types of selector and
their functions

the difference between the 5 selectors

the uses of these selectors

 COMPUTER

PRESENTATION

THANK YOU
FOR YOUR ATTENTION
CODE ON
NEXT PAGE