CSS nur auf bestimmten Bereich anwenden

Ich hab im Content Manager eine Seite erstellt, die eine Bildrgalerie enthält. Die Bilder werden durch CSS in leichte abgewinkelte Positionen geneigt und beim Hovern vergrößert. Dummrweise wird das CSS jetzt aber auf alle Elemente der
Seite angewendet unter anderem auf das Kategorienmenü und das Sekundärmenü uind auch auf den Warenkorb. Schaut natürlich entsprechend bescheiden aus.
Jetzt muss es doch eine Möglihckeit geben, das CSS nur auf einen bestimmten Bereich der Seite anzuwenden. Da CSS generell nicht meine Stärke ist... hat jemand vielleicht eine Idee?

vG Tom

 

Da wäre ein Link zu deiner Seite nützlich.

 

Stimmt...ich vergaß:
https://www.webshop-mikulini.at/info/inspirationen.html

 

Der Code wäre vielleicht auch nicht schlecht. Hab ihn der Kürze wegen auf vier Bilder beschränkt:

<style type="text/css">

ul {
max-width: 100%;
margin: 2em auto;
}
ul li {
list-style: none;
max-width: 250px;
display: inline-block;
background-color: white;
background: linear-gradient(110deg, white, oldlace);
box-shadow: 4px 4px 15px gray;
vertical-align: top;
margin: 0px;
position: relative;
transform: rotate(-2deg);
transition: all ease 0.3s;
}

ul li:nth-child(2n+1) {transform: rotate(8deg);}
ul li:nth-child(3n+2) {transform: rotate(-6deg);}
ul li:nth-child(5n+3) {transform: rotate(-3deg);}
ul li:nth-child(7n+5) {transform: rotate(5deg);}
ul li:nth-child(11n+7) {transform: rotate(-2deg);}

ul li:hover {
transform: scale(2) rotate(0deg);
z-index: 999;
}

ul img {
max-width: 90%;
height: auto;
margin: 5% 5% 0 5%;
}
ul span {
display: inline-block;
width: 90%;
min-height: 17px;
margin: 0 5% 5% 5%;
text-align: center;
}</style>
<center>
<ul>
<li><img alt="Bild 1" height="250" src=" images/image/Inspirations/DSC_5648.jpg" width="250" /><span> </span></li>
<li><img alt="Bild 2" height="250" src=" images/image/Inspirations/IMG_3988.jpg" width="250" /><span> </span></li>
<li><img alt="Bild 3" height="250" src=" images/image/Inspirations/DSC_0859.jpg" width="250" /><span> </span></li>
<li><img alt="Bild 4" height="250" src=" images/image/Inspirations/DSC_5662.jpg" width="250" /><span> </span></li>
</ul>
</center>

 

Da hast du wirklich css eingebaut, was auf andere Bereich wirkt.
Du hast doch die Seite mit <div class="bild" ... aufgebaut.
Also müssen alle css Anweisungen auch so aussehen:

Code:

.bild ul img {
    max-width: 90%;
    height: auto;
    margin: 5% 5% 0 5%;
}

also setze immer davor .bild (Würde aber statt .bild einen aussagekräftigen Namen für die class nehmen)

 

Wie dir wahrscheinlich aufgefallen ist, hab ich eh schon ein wenig herumprobiert... Mein Fehler war, dass ich en class-Name nicht überall hingeschrieben habe. Jetzt klappts. Dank!

 

sieht gut aus!