~
+
^
$
|
>
āĻāĻĒāĻ°ā§āĻ° āĻāĻ āĻāĻŋāĻšā§āĻ¨āĻā§āĻ˛ā§āĻ° āĻ¸āĻžāĻĨā§ āĻĒā§āĻ°ā§āĻ¨ā§ āĻĄā§āĻā§āĻ˛āĻĒāĻžāĻ°āĻ°āĻž āĻāĻŽāĻŦā§āĻļāĻŋ āĻĒāĻ°āĻŋāĻāĻŋāĻ¤ āĻšāĻ˛ā§āĻ, āĻ¨āĻ¤ā§āĻ¨ āĻšāĻŋāĻ¸ā§āĻŦā§ āĻāĻŽāĻžāĻ° āĻāĻžāĻā§ āĻāĻā§āĻ˛ā§ āĻāĻŋāĻ˛ āĻāĻ˛āĻŋā§ā§āĻ¨ āĻ¸āĻžāĻāĻ¨ (we are not alone ) (āĻŦā§āĻ¯āĻžāĻāĻā§āĻ°āĻžāĻāĻ¨ā§āĻĄ āĻŽāĻŋāĻāĻāĻŋāĻ)āĨ¤ āĻāĻŽāĻŋ āĻā§āĻāĻ˛ āĻāĻ°āĻ¤āĻžāĻŽ āĻāĻāĻžāĻŦā§- What is this symble in CSS? āĻāĻ° āĻāĻžāĻāĻā§ āĻāĻŋāĻā§āĻā§āĻ¸ āĻāĻ°āĻžāĻ° āĻ¸āĻŽā§ āĻŦāĻ˛āĻ¤āĻžāĻŽ- āĻāĻāĻā§āĻ˛āĻž āĻā§?
CSS Selector āĻāĻ° āĻāĻ°ā§āĻāĻāĻž āĻāĻžāĻŽā§āĻ˛āĻžāĻ° āĻāĻžā§āĻāĻž āĻšāĻ˛ā§- pseudo selectors
, pseudo elements
, pseudo classes
āĻŽāĻžāĻ¨ā§, āĻā§āĻ¨āĻāĻž āĻā§?
::before ::after
āĻ¸ā§āĻ¯ā§āĻĄā§ āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ° āĻ¨āĻžāĻāĻŋ āĻā§āĻ˛āĻžāĻ¸, āĻ¨āĻžāĻāĻŋ āĻŦāĻžāĻāĻ¸āĻžāĻāĻā§āĻ˛?
:hover :focus
āĻāĻā§āĻ˛āĻž āĻāĻŋ āĻ¸ā§āĻ¯ā§āĻĄā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻ¨āĻžāĻāĻŋ āĻā§āĻ˛āĻžāĻ¸, āĻ¨āĻžāĻāĻŋ āĻŽāĻžāĻ¸ā§āĻāĻžāĻ°āĻŽāĻžāĻāĻ¨ā§āĻĄ?
āĻāĻ¸ā§āĻ¨ āĻāĻāĻā§ āĻāĻ˛ā§āĻāĻ¨āĻžāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻāĻ āĻŦāĻŋāĻˇā§āĻā§āĻ˛āĻžāĻ° āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻāĻ°āĻŋāĨ¤ āĻĒā§āĻ°āĻ¤āĻŋāĻāĻžāĻ° āĻ¸ā§āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ āĻ¨āĻžāĻŽ, āĻāĻžāĻ, āĻāĻŦāĻ āĻ¸āĻŽā§āĻāĻŦ āĻšāĻ˛ā§ CSS āĻāĻ° āĻā§āĻ¨ āĻāĻžāĻ°ā§āĻ¸āĻ¨ā§āĻ° āĻ āĻ¨ā§āĻ¤āĻ°ā§āĻā§āĻā§āĻ¤, āĻāĻ āĻŦāĻŋāĻˇā§āĻā§āĻ˛ā§āĻ āĻāĻžāĻ¨āĻŦāĨ¤ āĻ¤āĻŦā§ āĻļā§āĻ°ā§ āĻāĻ°āĻžāĻ° āĻāĻā§ āĻāĻ°ā§āĻāĻāĻž āĻŦāĻŋāĻˇā§ āĻŦāĻ˛ā§ āĻ¨ā§ā§āĻž āĻāĻžāĻ˛āĨ¤
āĻāĻāĻā§ āĻļā§āĻ§ā§ CSS Selector āĻāĻ° āĻ¨āĻžāĻŽ āĻāĻŦāĻ āĻļā§āĻ°ā§āĻŖā§āĻŦāĻŋāĻ¨ā§āĻ¯āĻžāĻ¸ āĻ¤āĻĨāĻž āĻā§āĻ˛āĻžāĻ¸āĻŋāĻĢāĻŋāĻā§āĻ¯āĻžāĻļāĻžāĻ¨ āĻ¨āĻŋā§ā§ āĻāĻŽāĻžāĻĻā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻ¯ā§ āĻāĻāĻāĻž āĻ§ā§āĻāĻ¯āĻŧāĻžāĻļāĻž āĻāĻā§, āĻ¸ā§āĻāĻž āĻā§āĻ˛āĻŋā§āĻžāĻ° āĻāĻ°āĻžāĻ° āĻā§āĻˇā§āĻāĻž āĻāĻ°āĻŦā§āĨ¤ āĻ¸āĻŦ āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ° āĻ¨āĻŋā§ā§ āĻāĻ˛āĻžāĻĻāĻž āĻāĻ˛āĻžāĻĻāĻž āĻāĻ˛ā§āĻāĻ¨āĻž āĻāĻ°āĻ¤ā§ āĻā§āĻ˛ā§ āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ°āĻĒāĻŋāĻĄāĻŋā§āĻž āĻšā§ā§ āĻ¯āĻžāĻŦā§, āĻāĻŦāĻ āĻ¸āĻ¤ā§āĻ¯āĻŋ āĻŦāĻ˛āĻ¤ā§ āĻāĻŋ, āĻāĻ˛āĻžāĻĻāĻž āĻāĻ˛ā§āĻāĻ¨āĻžāĻ° āĻĒā§āĻ°ā§ā§āĻāĻ¨āĻ āĻ¨āĻžāĻāĨ¤ āĻā§āĻŦāĻŋāĻ˛ āĻāĻāĻžāĻ°ā§ āĻ¨āĻžāĻŽ, āĻāĻžāĻ°ā§āĻ¸āĻ¨, āĻāĻžāĻ āĻāĻŦāĻ āĻā§āĻā§āĻ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ, āĻāĻāĻā§āĻā§āĻ āĻ āĻ¨ā§āĻāĨ¤
[ā§§] āĻāĻāĻ°ā§āĻāĻŋ pseudo āĻļāĻŦā§āĻĻā§āĻ° āĻŦāĻžāĻāĻ˛āĻž āĻ
āĻ¨ā§āĻāĻāĻž āĻāĻāĻ°āĻāĻŽ- āĻā§āĻ¤ā§āĻ°āĻŋāĻŽ, āĻāĻĻā§āĻŽ āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋāĨ¤ āĻ
āĻ°ā§āĻĨāĻžā§, Pseudo Selector āĻāĻ¸āĻ˛ā§ āĻā§āĻ¨ āĻ¸ā§āĻŦāĻ¤āĻ¨ā§āĻ¤ā§āĻ° āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ° āĻ¨āĻž, āĻāĻ° āĻ¨āĻŋāĻāĻ¸ā§āĻŦ āĻā§āĻ¨ āĻ¸āĻ¤ā§āĻ¤āĻž āĻ¨āĻžāĻāĨ¤ āĻ¸ā§ āĻā§āĻ¤ā§āĻ°āĻŋāĻŽ āĻĒāĻĻā§āĻ§āĻ¤āĻŋāĻ¤ā§
āĻ
āĻ¨ā§āĻ¯ āĻāĻāĻāĻž āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ°ā§āĻ° āĻāĻĻā§āĻŽāĻŦā§āĻļā§ āĻ¤āĻžāĻ° āĻāĻžāĻ āĻāĻ°ā§āĨ¤
āĻā§āĻ¨āĻāĻž āĻā§?
::before ::after
āĻāĻ° āĻŽāĻ¤ āĻ¯āĻžāĻ°āĻž āĻāĻā§, āĻ¯ā§āĻŽāĻ¨, ââ::selection ::marker ::first-line ::first-letter ::placeholder ::backdrop
āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ, āĻāĻā§āĻ˛ā§āĻā§ āĻŦāĻ˛āĻž āĻšā§- ââPseudo Element (āĻ¸ā§āĻ¯ā§āĻĄā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ)āĨ¤- āĻāĻ°āĻž āĻĄāĻŦāĻ˛ āĻā§āĻ˛āĻ¨
::
āĻĻāĻŋā§ā§ āĻļā§āĻ°ā§ āĻšā§āĨ¤ āĻ¤āĻŦā§ āĻāĻŋāĻā§ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§āĻ° āĻĒā§āĻ°ā§āĻ¨ā§ āĻāĻžāĻ°ā§āĻ¸āĻ¨āĻā§āĻ˛ā§āĻ¤ā§ āĻāĻā§āĻ° āĻ¸āĻŋāĻā§āĻā§āĻ˛ āĻā§āĻ˛āĻ¨:
āĻĻāĻŋā§ā§āĻ āĻāĻžāĻ āĻāĻ°ā§āĨ¤ āĻāĻĻā§āĻ° āĻāĻžāĻ āĻšāĻ˛ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻ¨āĻŋā§ā§āĨ¤ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ° āĻāĻā§/āĻĒāĻ°ā§ (::before ::after
) āĻāĻŋāĻā§ āĻāĻ°āĻž, āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ° āĻĒā§āĻ°āĻĨāĻŽ āĻ˛āĻžāĻāĻ¨ (::first-line
) āĻŦāĻž (::first-letter
), āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ āĻ¨āĻŋā§ā§ āĻāĻžāĻ āĻāĻ°āĻž, āĻŽā§āĻāĻāĻĨāĻž āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ-āĻā§āĻ¨ā§āĻĻā§āĻ°āĻŋāĻ āĻāĻžāĻāĻāĻ°ā§āĻŽ āĻ¸āĻŦāĨ¤
- āĻāĻ°āĻž āĻĄāĻŦāĻ˛ āĻā§āĻ˛āĻ¨
:hover :focus
āĻāĻ° āĻŽāĻ¤ āĻ¯āĻžāĻ°āĻž āĻāĻā§, āĻ¯ā§āĻŽāĻ¨,:visited :first-child :nth-child() :checked :target :has() :is() :where()
āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ, āĻāĻā§āĻ˛ā§āĻā§ āĻŦāĻ˛āĻž āĻšā§- Pseudo Class (āĻ¸ā§āĻ¯ā§āĻĄā§ āĻā§āĻ˛āĻžāĻ¸)āĨ¤- āĻāĻ°āĻž āĻļā§āĻ°ā§ āĻšā§ āĻ¸āĻŋāĻā§āĻā§āĻ˛ āĻā§āĻ˛āĻ¨ āĻĻāĻŋā§ā§āĨ¤ āĻāĻĻā§āĻ° āĻāĻžāĻ āĻšāĻ˛ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ° āĻ
āĻŦāĻ¸ā§āĻĨāĻžāĻ° (State) āĻāĻĒāĻ° āĻāĻŋāĻ¤ā§āĻ¤āĻŋ āĻāĻ°ā§ āĻāĻžāĻ āĻāĻ°āĻž, āĻ¯ā§āĻŽāĻ¨-
:hover :focus :target :checked
āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ, āĻ āĻĨāĻŦāĻž āĻāĻŋāĻ¨ā§āĻ¨ āĻāĻ°ā§āĻāĻāĻŋ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻāĻā§ āĻ¸āĻŋāĻ˛ā§āĻā§āĻ āĻāĻ°āĻž-:has() :is() :where()
āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋāĨ¤
- āĻāĻ°āĻž āĻļā§āĻ°ā§ āĻšā§ āĻ¸āĻŋāĻā§āĻā§āĻ˛ āĻā§āĻ˛āĻ¨ āĻĻāĻŋā§ā§āĨ¤ āĻāĻĻā§āĻ° āĻāĻžāĻ āĻšāĻ˛ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ° āĻ
āĻŦāĻ¸ā§āĻĨāĻžāĻ° (State) āĻāĻĒāĻ° āĻāĻŋāĻ¤ā§āĻ¤āĻŋ āĻāĻ°ā§ āĻāĻžāĻ āĻāĻ°āĻž, āĻ¯ā§āĻŽāĻ¨-
- āĻāĻ° āĻāĻ āĻĻā§āĻ āĻ§āĻ°āĻ¨ā§āĻ° āĻ¸āĻŋāĻ˛ā§āĻā§āĻāĻ°āĻā§ Pseudo Selector āĻŦāĻ˛ā§āĨ¤
āĻāĻŋāĻā§ āĻāĻŽāĻ¨ Pseudo Selector āĻ¨āĻŋāĻā§ āĻā§āĻŦāĻŋāĻ˛ āĻāĻāĻžāĻ°ā§ āĻĻā§ā§āĻž āĻšāĻ˛ā§, āĻāĻžāĻ°ā§āĻ¸āĻ¨ āĻāĻŦāĻ āĻ¸āĻāĻā§āĻˇāĻŋāĻĒā§āĻ¤ āĻĒāĻ°āĻŋāĻāĻŋāĻ¤āĻŋāĻ¸āĻšāĨ¤ āĻāĻā§āĻ˛ā§ āĻāĻžā§āĻž āĻāĻ°āĻ āĻ āĻ¨ā§āĻ āĻāĻā§, āĻ¸āĻžāĻ°ā§āĻ āĻāĻ°āĻ˛ā§āĻ āĻĒāĻžāĻŦā§āĻ¨āĨ¤
CSS Pseudo Elements
Pseudo Elements | Version | Short Definition & Example |
---|---|---|
::first-line |
CSS1 | Styles the first line of a block-level element. Example: p::first-line { color: blue; } |
::first-letter |
CSS1 | Styles the first letter of a block-level element. Example: p::first-letter { font-size: 2em; } |
::before |
CSS2 | Inserts content before an elementâs content. Example: p::before { content: "Note: "; } |
::after |
CSS2 | Inserts content after an elementâs content. Example: p::after { content: " End."; } |
::selection |
CSS3 | Styles the portion of text highlighted by the user. Example: ::selection { background: yellow; } |
::placeholder |
CSS3 | Styles the placeholder text of an input field. Example: input::placeholder { color: grey; } |
::marker |
CSS3 | Styles the bullet or numbering of list items. Example: li::marker { color: red; } |
::backdrop |
CSS4 | Styles the backdrop of an element in fullscreen mode. Example: ::backdrop { background: black; } |
::file-selector-button |
CSS4 | Styles the button in <input type="file"> . Example: input::file-selector-button { color: blue; } |
CSS Pseudo Classes
Pseudo Classes | Version | Short Definition & Example |
---|---|---|
:link |
CSS1 | Styles unvisited links. Example: a:link { color: blue; } |
:visited |
CSS1 | Styles visited links. Example: a:visited { color: purple; } |
:hover |
CSS2 | Styles elements when the mouse hovers over them. Example: a:hover { color: red; } |
:focus |
CSS2 | Styles elements when they are focused. Example: input:focus { border-color: green; } |
:first-child |
CSS2 | Targets the first child element of its parent. Example: p:first-child { font-weight: bold; } |
:nth-child() |
CSS3 | Matches elements based on their position among siblings. Example: p:nth-child(2) { color: blue; } |
:nth-of-type() |
CSS3 | Matches elements based on their type and position. Example: p:nth-of-type(2) { color: red; } |
:not() |
CSS3 | Excludes elements that match the given selector. Example: p:not(.highlight) { color: grey; } |
:enabled |
CSS3 | Styles form elements that are enabled. Example: input:enabled { background: white; } |
:disabled |
CSS3 | Styles form elements that are disabled. Example: input:disabled { background: grey; } |
:checked |
CSS3 | Styles elements that are checked (like checkboxes or radio buttons). Example: input:checked { background: yellow; } |
:target |
CSS3 | Styles elements that are the target of a URL fragment. Example: #section:target { background: yellow; } |
:has() |
CSS4 | Matches elements that contain specific child elements. Example: div:has(img) { border: 1px solid red; } |
:is() |
CSS4 | Matches elements that fit any of the selectors in the argument list. Example: p:is(.class1, .class2) { color: blue; } |
:where() |
CSS4 | Similar to :is() but with zero specificity. Example: :where(h1, h2) { margin: 0; } |
Combinator āĻāĻŦāĻ Attribute selector
[ā§¨] āĻļā§āĻ°ā§āĻ¤ā§ āĻ¯ā§ āĻāĻŋāĻšā§āĻ¨āĻā§āĻ˛ā§āĻ° āĻāĻĨāĻž āĻŦāĻ˛ā§āĻāĻŋāĻ˛āĻžāĻŽ, āĻ¸ā§āĻā§āĻ˛ā§āĻ āĻĻā§āĻ āĻāĻžāĻā§ āĻŦāĻŋāĻāĻā§āĻ¤- Combinator āĻāĻŦāĻ Attribute selectorāĨ¤ āĻāĻā§āĻ˛ā§ āĻŽā§āĻāĻžāĻŽā§āĻāĻŋ āĻĒā§āĻ°ā§āĻ¨ā§, āĻĒā§āĻ°āĻžā§ āĻ¸āĻŦāĻžāĻ āĻāĻžāĻ¨āĻŋāĨ¤ āĻāĻ° āĻāĻ Attribute selector āĻā§ $ ^ ~ *
āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ āĻāĻŋāĻšā§āĻ¨āĻā§āĻ˛ā§ āĻāĻ°āĻ āĻļāĻā§āĻ¤āĻŋāĻļāĻžāĻ˛ā§ āĻāĻ°ā§āĨ¤ āĻĒā§āĻ°ā§āĻ¨ā§ āĻšāĻ˛ā§āĻ āĻ
āĻ¨ā§āĻā§ āĻāĻā§āĻ˛ā§āĻ° āĻ¨āĻžāĻŽ āĻ¸āĻŽā§āĻĒāĻ°ā§āĻā§ āĻāĻāĻā§ āĻāĻ¨āĻĢāĻŋāĻāĻļāĻ¨ā§ āĻĨāĻžāĻā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻā§āĻŦāĻŋāĻ˛ā§ āĻāĻŋāĻā§ āĻāĻŽāĻ¨ Combinator āĻāĻŦāĻ Attribute selector āĻĻā§ā§āĻž āĻšāĻ˛ā§, āĻ¨āĻžāĻŽ, āĻāĻžāĻ°ā§āĻ¸āĻ¨ āĻ āĻ¸āĻāĻā§āĻˇāĻŋāĻĒā§āĻ¤ āĻĒāĻ°āĻŋāĻāĻŋāĻ¤āĻŋāĻ¸āĻšāĨ¤
Selector | Name | Version | Description & Example |
---|---|---|---|
+ |
Adjacent Sibling Selector | CSS2 | Selects the first sibling element immediately following another element. Example: ul + p { color: blue; } |
~ |
General Sibling Selector | CSS2 | Selects all sibling elements that follow another element, not necessarily adjacent. Example: ul ~ table { border: 1px solid black; } |
[attribute] |
Attribute Selector | CSS1 | Selects all elements that have a specific attribute, regardless of its value. Example: [class] { color: red; } |
[attribute=my-Address] |
Exact Attribute Value Selector | CSS2 | Selects elements whose specific attribute exactly matches the value âmy-Addressâ. Example: [class=my-Address] { color: green; } |
[attribute$=ess] |
Ends With Attribute Selector | CSS2 | Selects elements whose attribute ends with a specific string. Example: [class$=ess] { color: blue; } |
[class|=my] |
Hyphen-Separated Attribute Selector | CSS2 | Selects elements whose attribute is either exactly âmyâ or starts with âmy-â, such as âmy-addressâ. Example: [class|=my] { color: purple; } |
[class^=L] |
Starts With Attribute Selector | CSS2 | Selects elements whose attribute starts with the specific value âLâ. Example: [class^=L] { color: orange; } |
[class~=beautiful] |
Contains Word Attribute Selector | CSS2 | Selects elements whose attribute contains a specific word (space-separated). Example: [class~=beautiful] { color: pink; } |
[class*=s] |
Contains Substring Attribute Selector | CSS3 | Selects elements whose attribute contains a specific substring anywhere in the value. Example: [class*=s] { color: teal; } |
āĻāĻāĻā§ āĻ āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤āĻ, āĻ¸āĻŦāĻžāĻ āĻāĻžāĻ˛ āĻĨāĻžāĻāĻŦā§āĻ¨, āĻāĻ˛ā§āĻ˛āĻžāĻš āĻšāĻžāĻĢā§āĻ