🗃ī¸ CSS Selectors - āĻ¨āĻ¤ā§āĻ¨, āĻĒā§āĻ°āĻžāĻ¤āĻ¨ āĻāĻŦāĻ‚ āĻ…āĻ¨ā§āĻ¯āĻžāĻ¨ā§āĻ¯

~ + ^ $ | >

āĻ‰āĻĒāĻ°ā§‡āĻ° āĻāĻ‡ āĻšāĻŋāĻšā§āĻ¨āĻ—ā§āĻ˛ā§‹āĻ° āĻ¸āĻžāĻĨā§‡ āĻĒā§āĻ°ā§‹āĻ¨ā§‹ āĻĄā§‡āĻ­ā§‡āĻ˛āĻĒāĻžāĻ°āĻ°āĻž āĻ•āĻŽāĻŦā§‡āĻļāĻŋ āĻĒāĻ°āĻŋāĻšāĻŋāĻ¤ āĻšāĻ˛ā§‡āĻ“, āĻ¨āĻ¤ā§āĻ¨ āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻ†āĻŽāĻžāĻ° āĻ•āĻžāĻ›ā§‡ āĻāĻ—ā§āĻ˛ā§‹ āĻ›āĻŋāĻ˛ āĻāĻ˛āĻŋā§Ÿā§‡āĻ¨ āĻ¸āĻžāĻ‡āĻ¨ (we are not alone :alien:) (āĻŦā§āĻ¯āĻžāĻ•āĻ—ā§āĻ°āĻžāĻ‰āĻ¨ā§āĻĄ āĻŽāĻŋāĻ‰āĻœāĻŋāĻ•)āĨ¤ āĻ†āĻŽāĻŋ āĻ—ā§āĻ—āĻ˛ āĻ•āĻ°āĻ¤āĻžāĻŽ āĻāĻ­āĻžāĻŦā§‡- What is this symble in CSS? āĻ†āĻ° āĻ•āĻžāĻ‰āĻ•ā§‡ āĻœāĻŋāĻœā§āĻžā§‡āĻ¸ āĻ•āĻ°āĻžāĻ° āĻ¸āĻŽā§Ÿ āĻŦāĻ˛āĻ¤āĻžāĻŽ- āĻāĻ‡āĻ—ā§āĻ˛āĻž āĻ•ā§€?

CSS Selector āĻāĻ° āĻ†āĻ°ā§‡āĻ•āĻŸāĻž āĻāĻžāĻŽā§‡āĻ˛āĻžāĻ° āĻœāĻžā§ŸāĻ—āĻž āĻšāĻ˛ā§‹- pseudo selectors, pseudo elements, pseudo classes :thinking: āĻŽāĻžāĻ¨ā§‡, āĻ•ā§‹āĻ¨āĻŸāĻž āĻ•ā§€?

::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() āĻ‡āĻ¤ā§āĻ¯āĻžāĻĻāĻŋāĨ¤
  • āĻ†āĻ° āĻāĻ‡ āĻĻā§āĻ‡ āĻ§āĻ°āĻ¨ā§‡āĻ° āĻ¸āĻŋāĻ˛ā§‡āĻ•ā§āĻŸāĻ°āĻ•ā§‡ 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; }

āĻ†āĻœāĻ•ā§‡ āĻ āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤āĻ‡, āĻ¸āĻŦāĻžāĻ‡ āĻ­āĻžāĻ˛ āĻĨāĻžāĻ•āĻŦā§‡āĻ¨, āĻ†āĻ˛ā§āĻ˛āĻžāĻš āĻšāĻžāĻĢā§‡āĻœ :heart:

11 Likes

@RaheelArfeen Take a look here. Very important topic for you.

āĻāĻ° āĻ‰āĻĻāĻžāĻšāĻžāĻ°āĻŖ:
HTML

<div class="sample">This is a sample text.</div>
<div class="test">This is a test text.</div>
<div class="example">This is an example text.</div>
 <div class="demo">This text won't be affected.</div>

CSS

[class*="s"] {
    color: teal;
}

āĻāĻ‡ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖā§‡, <div> āĻāĻ˛āĻŋāĻŽā§‡āĻ¨ā§āĻŸāĻ—ā§āĻ˛ā§‹ āĻ¯ā§‡āĻ—ā§āĻ˛ā§‹āĻ° āĻ•ā§āĻ˛āĻžāĻ¸ sample, test, āĻāĻ—ā§āĻ˛ā§‹ āĻ¸āĻŦāĻ—ā§āĻ˛ā§‹āĻ¤ā§‡āĻ‡ “s” āĻ…āĻ•ā§āĻˇāĻ°āĻŸāĻŋ āĻ†āĻ›ā§‡, āĻ¤āĻžāĻ‡ āĻāĻ—ā§āĻ˛ā§‹āĻ° āĻŸā§‡āĻ•ā§āĻ¸āĻŸā§‡āĻ° āĻ°āĻ™ teal āĻ¸ā§‡āĻŸ āĻšāĻŦā§‡āĨ¤

demo,‘example’ āĻāĻ˛āĻŋāĻŽā§‡āĻ¨ā§āĻŸāĻŸāĻŋ āĻĒā§āĻ°āĻ­āĻžāĻŦāĻŋāĻ¤ āĻšāĻŦā§‡ āĻ¨āĻž, āĻ•āĻžāĻ°āĻŖ āĻāĻ° āĻ•ā§āĻ˛āĻžāĻ¸ā§‡ “s” āĻ¨ā§‡āĻ‡āĨ¤

1 Like

āĻœā§āĻŦā§€ āĻ­āĻžāĻ‡, āĻāĻŸāĻž āĻŸā§‡āĻŦāĻŋāĻ˛ā§‡ āĻĻā§‡āĻ–āĻžāĻ¨ā§‹ āĻ¸āĻŋāĻ˛ā§‡āĻ•ā§āĻŸāĻ°āĻ—ā§āĻ˛ā§‹āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻ¸āĻŦāĻžāĻ° āĻļā§‡āĻˇā§‡ āĻ†āĻ›ā§‡āĨ¤ HTML/CSS āĻāĻ° āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸āĻš āĻĻā§‡āĻ–āĻžāĻ¨ā§‹āĻ° āĻœāĻ¨ā§āĻ¯ āĻ§āĻ¨ā§āĻ¯āĻŦāĻžāĻĻ :v:

āĻ…āĻ¨ā§‡āĻ• āĻ…āĻ¨ā§‡āĻ• āĻ§āĻ¨ā§āĻ¯āĻŦāĻžāĻĻāĨ¤ āĻŦāĻŋāĻ¸ā§āĻ¤āĻžāĻ°āĻŋāĻ¤ āĻœāĻžāĻ¨āĻ¤ā§‡ āĻĒāĻžāĻ°āĻ˛āĻžāĻŽāĨ¤

Onek sundorâ€Ļ Thanks vlo kisu show korar jonno

CSS Pseudo Elements share korar jonno thanks