CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply.

Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

CSS selectors are what you use to apply your styles to particular parts of your HTML document without having to add the styles “inline” (i.e. actually in your HTML). For example, you may want to make all <h1>elements in your HTML blue. You could do that inline by writing <h1 style=" color: blue;"> every time you add an<h1> element but you shouldn’t… there’s no need, it creates more opportunities for mistakes to be made and What you should do is add h1 {color: blue;}to your external CSS file. This will automatically make the text blue wherever you’ve used <h1> tags. In that example color: blue is the CSS, h1 is the selector.

So that’s what a CSS selector is. There are a whole bunch of different selectors available to you that allow you to be really precise in your styling.

Basic selectors

Universal selector Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: * ns|* *|* Example: * will match all the elements of the document.

Syntax

* { style properties }

• * Select All Elements

• ns|* matches all elements in namespace ns

• *|* matches all elements

• |* matches all elements without any declared namespace

  Type selectors

Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

Example :

All <a> elements.

a {
  color: red;
}

Class selectors

Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".

ID selectors

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".

Attribute selectors

Selects all elements that have the given attribute. Syntax: [attr], [attr=value], [attr~=value] ,[attr|=value], [attr^=value], [attr$=value] ,[attr*=value] Example:[autoplay]will match all elements that have the autoplay attribute set (to any value).

Examples

a[title] {
  color: purple;
}

Grouping selectors

Selector list

The , selector is a grouping method that selects all the matching nodes. Syntax:A, B Example: div, span will match both <span> and<div>elements.

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}

Combinators

Descendant combinator

The " " (space) combinator selects nodes that are descendants of the first element. Syntax:A B Example: div span will match all <span> elements that are inside a <div> element.

Syantax

selector1 selector2 {
  /* property declarations */
}

Eaxample

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

Result

Child combinator

The > combinator selects nodes that are direct children of the first element. Syntax: A > B Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.

CSS

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

OUTPUT

General sibling combinator

The~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax: A ~ B Example: p ~ span will match all <span>elements that follow a <p>, immediately or not.

Adjacent sibling combinator

The + combinator matches the second element only if it immediately follows the first element. Syntax: A + BExample: h2 + p will match the first <p> element that immediately follow an <h2> element.

Pseudo

Pseudo classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example,:hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Location pseudo-classes

These pseudo-classes relate to links, and to targeted elements within the current document.

• :any-link

  Matches an element if the element would match either :link or :visited.

• :link

Matches links that have not yet been visited.

• :visited

Matches links that have been visited.

• :target

Matches the element which is the target of the document URL.

• :scope

Represents elements that are a reference point for selectors to match against.

User action pseudo-classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

• :hover

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

• :active

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

• :active

Matches when an item is being activated by the user, for example clicked on.

• :focus

Matches when an element has focus.

• :focus-visible

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

• :focus-within

Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Pseudo elements

Before Pseudo Element

The before pseudo element is an element you can create which will be placed as the very first child of the element you are creating it for.

div::before {
  content: "Child 0";
}

<div>
  <span>Child 1</span>
  <span>Child 2</span>
</div>

In the above code we are using the before pseudo selector to select the before element for our div. This will create a new element in our HTML that has the text "Child 0" inside of it. You will notice in our HTML, though, there is no element corresponding to the::before element and that is because the pseudo element is created entirely in CSS and when we write our HTML we don't reference it.

Now to create a pseudo element just prefix it :: and then put the type of pseudo element you are selecting. In our case we are creating a before pseudo element inside every div on our page.

After Pseudo Element The after pseudo element is exactly the same as the before pseudo element except that it is added as the last child of the element instead of the first.

div::after {
  content: "Child 3";
}

<div>
  <span>Child 1</span>
  <span>Child 2</span>
</div>

Conclusion

CSS selectors are important for coding in CSS because they help target specific elements on a web page. This is important because it allows you to style only the elements you want without worrying about affecting other elements on the page. I hope that you liked this article. If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it.

This is what all You Should Know About Css Selectors. Thank You