CSS Selectors Use cases

Hello Everyone today i will show you how you can combine selectors in CSS to use them efficiently. I am not going to discuss All the selectors and how to use, i will just showcase some code snippets for the selectors.I will some basic code snippets to some advance one

Let's get started...

When you want to change an element style by hovering some other element -

<div class="card">
  <p>some text</p>
  <button class="btn">I am hidden</button>
</div>

.btn{
  opacity:0
}
.card:hover > .btn {
  opacity:1
}

• When you will hover over the card, the button will be visible

When you want to give styling to all the elements except the last one.

.list:has(.list-item) :not(.list-item:nth-last-child(1)){
  color:red;
}

• It will apply the style to all the elements with .list-item class but not the last element

When you want to change parent container styling using child element

<div class="container">
  <label for="">Change Parent Color<input type="checkbox"></label>
</div>

.container:has(input[type="checkbox"]:checked){
  background-color:black;
  color:white;
}

• It will check whether the container has an input of checkbox as checked or not, if it is checked apply the styling to the container else don't do anything.

When you want to create dropdown effect -

When you want to create custom radio buttons or checkboxes

Using these techniques you can create many new things with css transition, animation and all

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [e-mail]

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Comments

[Amir-cahyadi]

❤️👍