CSS Part I
CSS Selectors
Lecturer:
Faramarz Saidmohammadi
CSS Selectors
Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that
they can be styled.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, attribute, and more or combination of
these.
o element Selector (Tag Selector) o Child Selector
o id Selector o Descendant selector
o class Selector o Sibling Selector
o Attribute Selector o Pseudo-Elements Selector
o Universal Selector o Pseudo-classes Selector
o Grouping Selectors
The Element(Tag) Selector
• The element selector selects elements based on the element tag.
• You can select all <p> elements on a page like this: (all <p>
elements will have a red text color)
Example of tag Selector
OUTPUT
The id Attribute
• The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page.
• You might want to uniquely identify an element so that you can link to that specific part in the
document,
• Or to specify that a CSS style or piece of JavaScript should apply to the content of just that one
element within the document.
NOTE: Remember not to start the id with numbers or special character except underscore ( _ ) and dash ( - )
The id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• An id should be unique within a page, so the id selector is used if you want to select a
single, unique element.
• To select an element with a specific id, write a hash character(#), followed by the id of
the element.
• #id{style properties }
• The style rule below will be applied to the HTML element with id=“p1":
Example of id Selector
OUTPUT
The Class Attribute
• The class attribute is used to group several HTML elements
• This allows other languages (css, javascript) to access a group of elements
with a class name.
• An element can be added to more than one class
o The value of the attribute may also be a space-separated list of class names.
• Several elements can have same class name
NOTE: Remember not to start the class with numbers or special character except underscore ( _ ) and dash ( - )
The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period(.)
character, followed by the name of the class:
• Syntax: .class_name{ style properties }
o In the example below, all HTML elements with class=“red" will have
red color text:
Example of class Selector
OUTPUT
The class Selector
• Although different type elements (marked up with different tags)
may have the same class name, you can specify that only specific type
of HTML element ( with specific tag ) should be affected by a class
o Example next slide
Selecting element with specific tag name and class name
•In the example we are
selecting only “those HTML
elements which are paragraph
(<p></p) and have class name
red
•Other paragraphs which does not
have the class red won't be
affected
•Other elements (which may have
the class red but are not
paragraphs) won't be affected OUTPUT
Universal Selector
• Select all elements in the document.
• It is specified by asterisk (*) symbol.
o Syntax: * {style properties }
• In the examples below, all elements in the document will have red color text
OUTPUT
IMPORTANT NOTE: Be careful with this type of selector, it will select the <html> and <body> of the document too
Try border property to see this
*{ border: 1px solid blue;}
Grouping Selectors
• If you have elements with the same style definitions, like this:
• You can group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• In the example below we have grouped the selectors from the code above:
Attribute Selector
• It is possible to select HTML elements that have specific
attributes or attribute values.
• Use ([]) in order to select according to attribute
• Syntax: [attribute_name]{ style properties }
Or [attribute_name = attribute_value]{ style properties }
• In the first example: those elements which have name
attribute will be selected and their text content color will
be change to red
• In the second example: Those elements will be selected
which have name attribute and the value for the name
attribute is “username”
Child Selector
• The child selector selects all elements that are the direct children of a specified element.
o In other words, it only looks one level down the nested Elements, no deeper
• A child selector is made up of two or more selectors separated by ">". (div > p)
• Syntax: parent_element > target_element { style properties }
Direct children
Direct children
Direct children
Direct children
• The example (next slide) selects all <p> elements that are direct children of a <div> element:
Example of child selector
Output
Descendant selector
• A descendant selector in CSS is any selector with white space between two selectors
• The descendant selector is used when we want to select only those HTML elements which are within
(descendant) another Element.
o In other words, it selects both direct and indirect children elements
• Syntax: parent_element target_element { style properties }
• ul li { }
• header h2 { }
Descendants
Descendants
• footer a { }
Descendants
• .module div { }
• #info-toggle span { }
• div dl dt a { }
Example
Output
Sibling Selector (Adjacent)
• Adjacent Sibling Selector (+) selects the
immediate adjacent (both are children of the
same parent element)
o Syntax: former_element + target_element { style properties }
o In this example the first (immediate)
paragraph element <p> after <div>
element will be selected.
Output
Sibling Selector (General)
• The general sibling selector (~) selects all elements
that are siblings of a specified element.
o All other elements which are the children of the same parent element
o Syntax: former_element ~ target_element { style properties }
Output
• The following example selects all <p> elements that
are siblings of <div> elements:
Pseudo-Elements
• A CSS pseudo-element selector (::) is used to style specified parts of an element.
o For example, it can be used to:
o Style the first letter, or line, of an element
o Insert content before, or after, the content of an element
o Syntax: selector::pseudo-element {property: value;}
• Target the First Line of paragraph
• Target the First Letter of a Paragraph
Other Types of Pseudo-Elements
• The ::after and ::before pseudo-elements are used to insert content in the after
and before of an element ( Inside the content of the element )
• Examples: Image as the content
Unicode can also be used
Output
Output Output
Other Types of Pseudo-Elements
• The ::selection pseudo-element matches the portion of an element that is
selected by a user.
• The ::marker pseudo-element selects the marker box of a list item, which
typically contains a bullet or number. ( supported only by Firefox )
• Examples:
Output Output
Other Types of Pseudo-Elements
• The ::placeholder pseudo-element points to the placeholder of input
elements
• Examples:
Output
Pseudo-classes?
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
o Style an element when a user mouse over it
o Style visited and unvisited links differently
o Style an element when it gets focus
List of all Pseudo-classes
Selector Example Example description
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
List of all Pseudo Classes
CSS Specificity Rules
• If there are two or more conflicting CSS rules that point to the same element, the
browser follows some rules to determine which one is most specific and therefore wins
out.
• Think of specificity as a score/rank that determines which style declarations are
ultimately applied to an element.
• The universal selector (*) has low specificity, while ID selectors(#) are highly specific!
Specificity Hierarchy
• Every selector has its place in the specificity hierarchy. There are four categories which
define the specificity level of a selector:
• Inline styles
o An inline style is attached directly to the element to be styled.
Example: <h1 style="color: #ffffff;">.
• IDs
o An ID is a unique identifier for the HTML document elements, such as #navbar.
• Classes, attributes and pseudo-classes
o This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
• Elements and pseudo-elements
oThis category includes element names and pseudo-elements, such as h1, div, ::before and
::after.
• NOTE: Equal specificity: the latest rule counts(the latter rule is always applied)
How To Measure Specificity?
• Memorize how to measure specificity. “add 100 for each ID, add 10 for each attribute, class or pseudo-
class, add 1 for each element name or pseudo-element.
• Example:
o The Specificity for the following
body #content .data img:hover
o the specificity value would be 122: 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.
If You Have Any Question
Please Do not Hesitate!
