how to DRY up (remove redundancy) from this css class selector declaration?


Tags: css,optimization,dry,redundancy

Problem :

I have:

    .sketch_img_thumb_box .title{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .title{
      opacity: 1;
    }

    .sketch_img_thumb_box .artist{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .artist{
      opacity: 1;
    }


    .sketch_img_thumb_box .rating_bar {
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .rating_bar  {
      opacity: 1;
    }

I took it down to:

  .sketch_img_thumb_box .title, .sketch_img_thumb_box .artist, .sketch_img_thumb_box .rating_bar{
     opacity: 0.1;
 }
  .sketch_img_thumb_box:hover .title, .sketch_img_thumb_box:hover .artist,   .sketch_img_thumb_box:hover .rating_bar{
    opacity: 1;
}

Can we optimize further?



Solution :

write like this

css:

.sketch_img_thumb_box{
         opacity: 0.1;
     }
    .sketch_img_thumb_box:hover{
         opacity: 1;
     }

html:

<div class="sketch_img_thumb_box">
  <div class="title"></div>
  <div class="artist"></div>
  <div class="rating_bar"></div>
</div>

because if you give opacity the parent then children automatically get the opacity.

check the fiddle http://jsfiddle.net/sandeep/axuxT/4/

& If there are others children which you didn't want to give opacity then write this:

.no_bar{width:50px;height:50px;margin:5px;}
.sketch_img_thumb_box > *{opacity:0.1;display:inline-block;}
.sketch_img_thumb_box:hover > *{opacity:1}
.no_bar{background:black;opacity:1}

Check the fiddle http://jsfiddle.net/sandeep/RqP6p/


    CSS Howto..

    How to set an html element's height as { 100% - 10em from bottom }

    How to create a horizontal navigation in HTML/CSS above an image?

    How do I isolate an image from the html so that I can edit where it goes on the website?

    how to change height of ellipse in radial gradient in css for background property

    How to toggle two buttons on mouse hover?

    how can I use the CSS selector to solve this [duplicate]

    how to align text input in Angular-Material tool bar?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    How to make Css transition effect work on Safari and Chrome?

    How to do a best fit vertical align

    How can I remove the border around all the cells in a table?

    How to change the width of displayed text nested in a div?

    How to make responsive video background in DIV container with dynamic height?

    How to contol a CSS property with Javascript

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How to add css for specific input type text

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How can i put random values to css properties using JQuery?

    How to ensure a webpage's content extends to the bottom of a webpage using only CSS

    How to test for css properties like modernizr.js

    bootstrap navbar how to give it a max width

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How to animate a progress bar in Bootstrap 4?

    How can I have a CSS hover affect a different tag?

    How to change CSS class of a HTML page element using ASP.NET?

    How to handle mouseover properly on a flipped div?

    How to make a text flash in html/javascript?

    How to parse a specific link using a Selector CSS Query

    How to make css transition effect apply to all its children?

    How to style more than one ul