How to change a style in CSS such that it affects only code in a `section` or a `div`-CodePudding

I want to style the rendering of a piece of HTML code, which is automatically produced and then completed with a header. I can add style information in the header, but have limited influence on the HTML pieces which are produced and inserted. (Background: I am using Pandoc to render markdown text, where the HTML snippets produced are inserted in a template before writing into a file.).

The question is how to change a CSS rule for a part of HTML. I assumed (naively) that a class based selector, e.g. img.content would be applied in all elements included in a div with this classe:

In the style part of the head

...
img.content {max-height: 300px;}
...

and in the body

...
<img ... another image ... >
...
<div class=content> 
....
    <img ... myImage ... > 

</div>

where myImage would be shown with the max-height specified, but other images (e.g. anotherImage not affected.

This seems not to work, but I cannot add class=content to the place where the img tag is used.

Is there a way to achieve in HTML/CSS a rule which affects only selectors in certain parts of the code?

I add a running example of what I mean:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="/resources/templates/static/w3c.css" type="text/css">
  <style>
    img {
      max-height: 20px;
    }
    
    img.content {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="pic_trulli.jpg" alt="Italian Trulli">
  <p>My first paragraph.</p>
  <div class=content>
    <!-- code I cannot change but where pictures should be bigger  -->
    <img src="pic_trulli.jpg" alt="Italian Trulli">
    <!-- end -->
  </div>

</body>

</html>

CodePudding user response：

Yes, you can use the child selector >. The > combinator selects nodes that are direct children of the first (parent) element. img.content will only work if you have specified a class called content for the image.

div.content > img {
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="/resources/templates/static/w3c.css" type="text/css">
  <style>
    img {
      max-height: 20px;
    }
    
    img.content {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="pic_trulli.jpg" alt="Italian Trulli">
  <p>My first paragraph.</p>
  <div >
    <!-- code I cannot change but where pictures should be bigger  -->
    <img src="pic_trulli.jpg" alt="Italian Trulli">
    <!-- end -->
  </div>

</body>

</html>

CodePudding user response：

The div had class .content not the img, so it's .content img

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <style>
    img {
      max-height: 20px;
    }
    
    .content img {
      max-height: 40px;
    }
  </style>
</head>

<body>

  <h1>My First Heading</h1>
  <img src="https://i.ibb.co/hZj77BZ/lena01.jpg" alt="Lena">
  <p>My first paragraph.</p>
  <div class=content>
    <img src="https://i.ibb.co/hZj77BZ/lena01.jpg" alt="Lena">
    <!-- end -->
  </div>

</body>

</html>