Basic Selectors
/* Element/Type Selector */
p { color: black; }
/* Class Selector */
.btn { padding: 10px 20px; }
/* ID Selector */
#header { background: blue; }
/* Universal Selector */
* { margin: 0; padding: 0; }
/* Grouping */
h1, h2, h3 { font-family: Arial; }
Combinator Selectors
/* Descendant (space) — যেকোনো স্তরে */
div p { color: red; }
/* Child (>) — সরাসরি child */
div > p { color: blue; }
/* Adjacent Sibling (+) — ঠিক পরের sibling */
h1 + p { font-weight: bold; }
/* General Sibling (~) — সব পরের sibling */
h1 ~ p { color: gray; }
Attribute Selectors
a[href] { color: blue; }
a[target="_blank"] { color: green; }
input[type="text"] { border: 1px solid; }
a[href^="https"] { color: green; } /* শুরু */
a[href$=".pdf"] { color: red; } /* শেষ */
a[href*="google"] { color: purple; } /* ভিতরে */
Pseudo-classes (state)
a:hover { color: red; }
a:active { color: orange; }
a:visited { color: purple; }
input:focus { outline: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked { /* checked checkbox */ }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #eee; }
li:nth-child(even) { background: #fff; }
p:not(.special) { color: gray; }
:root { --main-color: blue; } /* CSS variables */
Pseudo-elements
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }
p::before { content: "→ "; }
p::after { content: " ←"; }
::selection { background: yellow; }
::placeholder { color: gray; }