1. Home
  2. Docs
  3. Web Technology I
  4. Style Sheet Language
  5. Name ,ID and Class Selectors

Name ,ID and Class Selectors

Here is the explanation of Name ,ID and Class Selectors:

In CSS, selectors are used to target and style specific HTML elements. Three commonly used types of selectors are:

  • Element Selector:
    • Targets HTML elements based on their tag name.
    • Example: p selects all <p> (paragraph) elements.
  • ID Selector:
    • Targets a specific HTML element with a unique identifier (ID).
    • Syntax: #id-name
    • Example: #header selects the HTML element with the ID attribute set to “header.”
  • Class Selector:
    • Targets HTML elements based on their class attribute.
    • Syntax: .class-name
    • Example: .highlight selects all elements with the class attribute set to “highlight.”

In CSS, combinators selectors are used to define relationships between different elements and apply styles based on these relationships. There are several types of combinators, each serving a specific purpose. Here are the main combinators:

  • The descendant selector selects all elements that are descendants of a specified element.
  • Syntax: ancestor descendant
  • Example: ul li selects all <li> elements that are descendants of a <ul>.
Screenshot 2024 03 04 201041
  • The child selector selects all direct children of a specified element.
  • Syntax: parent > child
  • Example: ul > li selects all <li> elements that are direct children of a <ul>.
Screenshot 2024 03 04 201248
  • The adjacent sibling selector selects an element that is immediately preceded by a specified element.
  • Syntax: prev + next
  • Example: h2 + p selects the <p> element that directly follows an <h2>.
Screenshot 2024 03 04 201421
  • The general sibling selector selects all elements that are siblings of a specified element and share the same parent.
  • Syntax: prev ~ siblings
  • Example: h2 ~ p selects all <p> elements that are siblings of an <h2> and share the same parent.
Screenshot 2024 03 04 201548

In CSS, pseudo-classes are used to select and style elements based on their state or position within the document. Pseudo-classes are preceded by a colon (:) and can be applied to various HTML elements. Here are some common pseudo-classes:

:hover:

  • Selects and styles an element when the user hovers over it with the mouse.
  • Example: a:hover selects and styles anchor links when they are hovered.
Screenshot 2024 03 05 170450

:active:

  • Selects and styles an element when it is being activated (clicked).
  • Example: button:active selects and styles buttons when they are being clicked.
Screenshot 2024 03 05 170523

:focus:

  • Selects and styles an element when it has focus (e.g., when tabbing through form elements).
  • Example: input:focus selects and styles input fields when they have focus.
Screenshot 2024 03 05 170555

:first-child:

  • Selects and styles an element that is the first child of its parent.
  • Example: li:first-child selects and styles the first <li> element in a list.
Screenshot 2024 03 05 170628

:last-child:

  • Selects and styles an element that is the last child of its parent.
  • Example: p:last-child selects and styles the last <p> element in a container.
Screenshot 2024 03 05 170830

:nth-child():

  • Selects and styles elements based on their position within their parent.
  • Example: ul li:nth-child(odd) selects and styles odd-numbered <li> elements in a list.
Screenshot 2024 03 05 170725

Attribute selectors in CSS allow you to target HTML elements based on the presence or value of their attributes. There are different types of attribute selectors that you can use.

Here are some examples:

Attribute Presence Selector ([attribute]): Selects elements that have a specific attribute, regardless of its value.

Screenshot 2024 03 05 171836

Attribute Value Selector ([attribute=value]): Selects elements that have a specific attribute with a certain value.

Screenshot 2024 03 05 171900

Attribute Contains Selector ([attribute*=value]): Selects elements where the attribute contains a specific value anywhere within it.

Screenshot 2024 03 05 171918

Attribute Starts With Selector ([attribute^=value]): Selects elements where the attribute starts with a specific value.

Screenshot 2024 03 05 171934

Attribute Ends With Selector ([attribute$=value]): Selects elements where the attribute ends with a specific value.

Screenshot 2024 03 05 171951

Attribute Value Prefix Selector ([attribute|=value]): Selects elements where the attribute value is either exactly the specified value or starts with the specified value followed by a hyphen.

Screenshot 2024 03 05 172008

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *