Scribd
Upload
22 views22 pages

1842 Week4 Pt2 CSS Selectors

The document discusses CSS selectors, emphasizing their importance in styling web elements. It covers various types of selectors, including universal, element, class, id, attribute, combinators, and pseudo-selectors. The document provides examples and links for further learning on CSS selectors and their usage.

Uploaded by

purna roka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views22 pages

1842 Week4 Pt2 CSS Selectors

The document discusses CSS selectors, emphasizing their importance in styling web elements. It covers various types of selectors, including universal, element, class, id, attribute, combinators, and pseudo-selectors. The document provides examples and links for further learning on CSS selectors and their usage.

Uploaded by

purna roka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

COMP 1842

Week 4 part 2 – CSS Selectors


Matt Prichard
Introduction
The two hardest parts of beginning CSS are manipulating the
box model without going mad and understanding CSS
selectors.

The actual styling part is quite simple, picking fonts and


colours etc.

https://www.freecodecamp.org/news/css-selectors-cheat-she
et/
Recap

http://
The selector is how we target the element/s we wish to style

They start www.w3schools.com/css/


off simple but can become quite involved.
css_syntax.asp
Universal selectors

http://
www.w3schools.com/css/
css_syntax.asp
Element or tag selectors

CSS Element Selector, also called a Tag selector is a


selector that selects all the HTML elements by a specified
names on a web page. It is the most basic selector of
all. Elements can be grouped.
Class selectors

Selects all elements with the ‘red’ class. The syntax is a


dot in CSS and the word class in the html, again these can
be combined.
Id selectors

The id selector uses the id attribute of an HTML element to


select a specific element. The id of an element is unique
within a page, so the id selector is used to select one
Attribute selectors
The [attribute] selector is used to select elements with a
specified attribute. Very useful for styling forms.
Combinators
Descendent combinator
The descendant selector matches all elements that are
descendants of a specified element.
The following example selects all <p> elements inside
<div> elements:

slide10.html
Descendent combinator
selects all elements that are descendant (or child) of the
elements with div tag and ‘row’ class

slide11.html
Child combinator
The child combinator (>) is placed between two CSS
selectors. It matches only those elements that are the direct
children of the first.

slide12.html
Adjacent Sibling Selector(+)
It selects the element that is immediately preceded by the former
element. Sibling elements must have the same parent element, and
"adjacent" means "immediately following".

slide13.html
General Sibling Selector ( ~)
The general sibling selector (~) selects all elements that are next
siblings of a specified element. The following example selects all <p>
elements that are next siblings of <div> elements:

slide14.html
Pseudo
selectors &
Pseudo classes
:first-child
The :first-child selector allows you to target the first element
immediately inside another element.

slide16.html
:last-child
The :last-child selector allows you to target the last element
immediately inside another element.

slide16.html
:nth-child()
Target the nth element immediately inside (or child of)
another element. Admits integers, even, odd, or formulas

https://css-tricks.com/almanac/selectors/n/nth-child/
a:not(.name)
Selects all a elements that are not of the .name class

This can go on and on


Scary full list
https://css-tricks.com/almanac/
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
CSS Diner game
https://flukeout.github.io/
?

You might also like