Selectors in CSS
Selectors in CSS
Simple Selectors
element,
class,
id,
/* universal selector */
* {
color: hotpink;
}
/* same as [lang^="en"] */
* [lang^="en"] {
color: green;
}
/* same as .warning */
*.warning {
color: red;
}
/* same as #maincontent */
*#maincontent {
border: 1px solid blue;
}
universal selector
/* class selector */
.classname {
color: hotpink;
}
/* id selector */
#myId {
color: green;
}
/* HTML tag as */
div {
color: red;
}
Selectors in CSS
Simple Selectors
attribute:- selects by an HTML element’s attribute, its value and or some condition.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* input which has type “text” */
input[type='text'] {
color: red;
}
/* any element which has role “button” */
[role='button'] {
color: red;
}
/* A class which has value 'primary', compare with case-insensitive, 's' for sensitive */
[class='primary' i] {
color: red;
}
/* A href that contains "example.com" */
[href*='example.com'] {
color: red;
}
/* elements whose class attribute contains the word "logo" */
[class~="logo"] {
padding: 2px;
}
/* A href that starts with https */
[href^='https'] {
color: green;
}
/* A href that ends with .com */
[href$='.com'] {
color: blue;
}
Select div
tags with class
value starting with 'divclass'
Select div
tags with class
value ending with 'no-class'
Selectors in CSS
Pseudo Classes Selectors
:hover - triggered when an element is interacted with pointing device like mouse
1. mouseenter
2. mouseleave,
:active - triggered when an element is actively being interacted with,
Eg:
1. mousedown - when mouse key is pressed
2. mouseup - when mouse key is released,
Selectors in CSS
Pseudo Classes Selectors
:focus - works same as :hover but for elements when focused from keyboard,
:focus-within - when child element receives focus, and
:focus-visible - when :focus
has outline: none
, still shows the focus rings if the element has been focussed through keyboard.
Selectors in CSS
Pseudo Classes Selectors
:link - for <a> tag with href attributes
:visited
:target: with id as fragment identifier, can style the content with that id from the url.
Selectors in CSS
Pseudo Classes Selectors
Form related states:
:disabled
and :enabled,
:
checked
and :indeterminate
:placeholder-shown -
to style the placeholder in input field
:required – Selects inputs with the required attribute,
:optional – Selects inputs that do not have the required attribute,
:read-only / :read-write - Selects inputs that have read-only
:valid, :invalid and :in-range
Selectors in CSS
Pseudo Classes Selectors
:first-child and :last-child,
:first-of-type and :last-of-type,
:only-child and :only-of-type,
Selectors in CSS
Pseudo Classes Selectors
:nth-child
- is a function, selects any 'n' children,
:nth-of-type -
is a function, selects any 'n' children of the type,
keywords
: odd, even,
functional formula:
(An+B), where:
A - integer, step size, default 1
n - integer, default 0.
B - integer, offset, default 0
/* Selects all even children */
:nth-child(even) {
}
/* Selects all odd children */
:nth-child(odd) {
}
/* Selects only 2nd child */
:nth-child(2) {
}
/* Selects every second/all even children */
:nth-child(2n) {
}
/* Selects all children starting from 2nd child*/
:nth-child(n+2) {
}
/* Selects every 2nd child starting from 2nd child*/
:nth-child(2n+2) {
}
/* Selects first 5 children */
:nth-child(-n+5) {
}
element ordering starts from 1 not 0 or negatives
Selectors in CSS
Pseudo Classes Selectors
/* Selects all even children */
:nth-child(even) {
}
/* Selects all odd children */
:nth-child(odd) {
}
/* Selects only 2nd child */
:nth-child(2) {
}
/* Selects every second/all even children */
:nth-child(2n) {
}
/* Selects all children starting from 2nd child*/
:nth-child(n+2) {
}
/* Selects every 2nd child starting from 2nd child*/
:nth-child(2n+2) {
}
/* Selects first 5 children */
:nth-child(-n+5) {
}
(An+B)
3n+3:
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
4n-1:
(4 x 0) - 1 = -1 = no match
(4 x 1) - 1 = 3 = 3rd Element
(4 x 2) - 1 = 7 = 7th Element
-n+3:
-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
Calculating An+B for various expressions:
Selectors in CSS
Pseudo Classes Selectors
<section>
<p>Little</p>
<p>Piggy</p> <!-- We want this one -->
</section>
/* selects "Little"
* p tag that is also 2nd child
* */
p:nth-child(2) {
color: red;
}
/* selects "Piggy"
* Select the second paragraph
* child of a parent
* */
p:nth-of-type(2) {
color: red;
}
/* selects "Little" */
p:hover:nth-child(2) {
color: red;
}
<section>
<h1>Words</h1>
<p>Little</p>
<!-- We want this one -->
<p>Piggy</p>
</section>
both will work same
nth-of-type will work correctly
Difference between
nth-child
and nth-of-type
Selectors in CSS
Pseudo Classes Selectors
/* selects "Little"
* p tag that is also 2nd child
* */
p:nth-child(2) {
color: red;
}
/* Select first three list items which
* have a class="important" */
:nth-child(-n + 3 of li.important) {
color: red;
}
/* Select all even li items from group
* having class="noted" */
li:nth-child(even of .noted) {
}
/* Select eighth through the
* fifteenth <p> elements */
p:nth-child(n+8):nth-child(-n+15) {
border: 5px solid red;
}
The of <selector>
syntax
:nth-last-of-type: Works like :nth-of-type, but it counts up from the bottom instead of the top,
:nth-last-child – Works like :nth-child, but it counts from the bottom,
Selectors in CSS
Pseudo Classes Selectors
/*
* if any p tag has no innertext
* */
p:empty {
background-color: yellow;
}
:empty - for styling empty HTML tags
<p>I'm a Paragraph Tag</p>
<p></p>
:root - Selects the element that is at the root of the document,
- Can add multiple selectors at once.
- Can use selectors without any tag.
Selectors in CSS
Pseudo Classes Selectors
Selectors in CSS
Combinators in CSS
Child combinator (>) - matches only direct children,
Descendant combinator ([space]) - matches direct and nested children as well,
Next-sibling combinator (+) - matches only the immediate second element, if both are children of the same parent,
Subsequent-sibling combinator (~) - matches all the adjacent elements, if both are children of the same parent,
Selector list (,) - select all the elements mentioned,
Namespace separator (not required)
A tool that translates CSS selectors into plain-english explainers:
https://kittygiraudel.github.io/selectors-explained/
/* All li that are only direct children
* of ul which has class="my-things"*/
ul.my-things > li {
margin: 2em;
}
/* li that are direct or nested children
* of ul which has class="my-things"*/
ul.my-things li {
margin: 2em;
}
/* Paragraphs that come
* immediately after any image */
img + p {
font-weight: bold;
}
/* Paragraphs that are just
* child of same parent and come after img */
img ~ p {
color: red;
}
/* All span and div tags */
span,
div {
border: red 2px solid;
}
#main,
.content,
article,
h1 + p {
font-size: 1.1em;
}
Selectors in CSS
Pseudo Elements in CSS
::before and ::after - they create a child element inside an element only if you define a content property,
::first-letter - styles first letter,
::first-line - styles first line,
::backdrop - If you have an element that is presented in full screen mode, such as a <dialog> or a <video>, you can style the space between the element and the rest of the page -- backdrop,
::marker - The ::marker pseudo-element lets you style the bullet or number for a list item or the arrow of a <summary> element,
::selection - styling selections,
::placeholder - styling placeholder,
::cue (not relevant)
W2_D1
By Yash Priyam
W2_D1
- 154