CSS Selectors Use cases

#html #css #webdev #beginners

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.