Search code examples
jquerycssjquery-selectors

How to ignore CSS img styling for certain sections of the website?

I need some help, with a jquery snippet preferably. The snippet we are looking for would be something, that would allow us to ignore certain css classes in the same page.

EX) We have the Header logo img and we would like to ignore the css styling of img, how can this be achieve?

Css

img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

We would like to ignore the css style for our first img and leave the style for the second img, which is the best approach?

Solution

  • You can do something like :-

    img:not(:first-child){
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

    Demo