CSS Selector

CSS Selector is just conditional statements which are used to apply a style to the Html elements. we can use it to select the Html element from the dom and manipulate it.

Jeremy Keith:

If you find you can’t select something in the CSS, that’s a sign that you probably need to add another class name to the HTML. The complexity is confined to the markup in order to keep the CSS more straightforward, modular, and maintainable.

The Basic Selector are given below:

ID Selector

Apply background color on container.

#container{
    background:#0f3057;
}

Class Selector

Apply background color on container.

.container{
    background:#0f3057;
}

Hover

Apply style to button on mouseover

button : hover{
    background:#0f3057;
}

Before and After Selector

p: after{
    content : '🤘';  //Insert something after the content of each <p> element
}
p: before{
    content : '🔨';  //Insert something before the content of each <p> element
}

Nth Child Selector

p:nth-child(2){
    border-left: 2px solid #0f3057;  //Selects every <p> element that is the second child of its parent
}
p:nth-last-child(2){
    border-left: 2px solid #0f3057;  //Insert something before the content of each <p> element
}

Attribute Selector

HTML

<form method="POST">
    <input type="email" name="email">
</form>

CSS

input[type=email]{
    border: 1px solid #0f3057;
}

Adjacent Sibling Selector

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li> <!-- the list item will be red-->
  <li>Three</li>
</ul>

CSS

li:first-of-type + li {
  color: red;
}

Important Links related to css selector

👉 sitepoint.com/future-generation-css-selecto.. 👉 css-tricks.com/creating-an-animated-menu-in..
👉 developer.mozilla.org/en-US/docs/Web/CSS/CS..

Bonus

3d-book-css.netlify.app