CSS Selector Cheat Sheet with Advanced Bitwise Operators

css.md

CSS Selector Cheat Sheet with Advanced Bitwise Operators

Basic Selectors

Selector	Example	Description
*	* { }	Selects all elements
elementname	p { }	Selects all <p> elements
.classname	.intro { }	Selects all elements with class="intro"
#idname	#firstname { }	Selects the element with id="firstname"

Combinators

Selector	Example	Description
element element	div p { }	Selects all <p> elements inside <div> elements
element>element	div > p { }	Selects all <p> elements where the parent is a <div> element
element+element	div + p { }	Selects the first <p> element that is placed immediately after <div> elements
element~element	p ~ ul { }	Selects every <ul> element that is preceded by a <p> element

Attribute Selectors

Selector	Example	Description
[attribute]	[target] { }	Selects all elements with a target attribute
[attribute="value"]	[target="_blank"] { }	Selects all elements with target="_blank"
[attribute~="value"]	[title~="flower"] { }	Selects elements with an attribute containing the word "flower"
[attribute^="value"]	a[href^="https"] { }	Selects every <a> element whose href attribute value begins with "https"
[attribute$="value"]	a[href$=".pdf"] { }	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*="value"]	a[href*="example"] { }	Selects every <a> element whose href attribute value contains the substring "example"

Pseudo-classes

Selector	Example	Description
:hover	a:hover { }	Selects links on mouse over
:active	a:active { }	Selects the active link
:focus	input:focus { }	Selects the input element which has focus
:first-child	p:first-child { }	Selects every <p> element that is the first child of its parent
:last-child	p:last-child { }	Selects every <p> element that is the last child of its parent
:nth-child(n)	p:nth-child(2) { }	Selects every <p> element that is the second child of its parent
:not(selector)	:not(p) { }	Selects every element that is not a <p> element

Pseudo-elements

Selector	Example	Description
::before	p::before { }	Insert content before every <p> element
::after	p::after { }	Insert content after every <p> element
::first-line	p::first-line { }	Selects the first line of every <p> element
::first-letter	p::first-letter { }	Selects the first letter of every <p> element

Advanced Bitwise Operators

CSS doesn't actually use bitwise operators, but we can draw parallels to logical operations in selector combinations:

Operator	CSS Equivalent	Description
AND (&)	.class1.class2	Selects elements with both class1 AND class2
OR (|)	.class1, .class2	Selects elements with class1 OR class2
NOT (~)	:not()	Selects elements that do not match the given selector
XOR (^)	No direct equivalent	In CSS, you can approximate XOR using combinations of other selectors

Examples of Complex Selectors (Simulating Bitwise Operations)

1. AND operation:

   .important.urgent { } /* Selects elements with both classes */

2. OR operation:

   .important, .urgent { } /* Selects elements with either class */

3. NOT operation:

   div:not(.important) { } /* Selects div elements without the 'important' class */

4. Simulating XOR (elements with one class but not both):

   .important:not(.urgent), .urgent:not(.important) { }

5. Complex combination:

   div.container > p.text:not(.highlighted) + span.icon { }

   This selects <span> elements with class "icon" that are immediately preceded by <p> elements with class "text" but not "highlighted", which are direct children of <div> elements with class "container".