-2

I'm trying to hide part of an image wrapped inside a div without class or id. Since i'm parsing code from a rss feed i can not give class or id to the div (i mean i can do it manually but this means to lose the automated posting). The parent div has a class and then there are 3 other div-s without class or id and within the third div is the image.

<div class="post-body-container"><div><div><div><img src=""></img></div><p>text</p><p>text</p></div></div></div>

What I have done till now:

With this styling I can hide part of the image because i give overflow: hidden to the desired div. (:

<style>.post-body-container div div div {
width: 418px;
height: 200px; 
overflow: hidden;</style>

The problem is that even the other div-s receive the same styling (width and height).

My question:

How can I give styling ONLY to the div that wraps the image?

Cœur
  • 32,421
  • 21
  • 173
  • 232
John Grischam
  • 263
  • 1
  • 12
  • Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) if you want to you can add another class name to the div to select them specifically. – Mukyuu Mar 14 '19 at 07:17
  • 1
    Hi. As i explained i'm posting automatically rss feed. If i give manually class to the div is not automatic posting anymore. I want to apply a general rule for all posts. – John Grischam Mar 14 '19 at 07:19
  • 1
    I think your code works well. Other divs don’t have any styling. (but it looks like they have height) – Ibra Mar 14 '19 at 07:25
  • 1
    Yes they have height. You are right. That's what i'm trying to eliminate. – John Grischam Mar 14 '19 at 07:25
  • I don't know what do you want to. If child element has height, parent DIV also has height. – Ibra Mar 14 '19 at 07:28
  • Hi @JohnGrischam, There is not a single selector available in `css`, that allows you to travel upside the `DOM`. You can do it using `javascript`. – Hamid R. Mar 14 '19 at 07:34
  • 1
    I don't find this to be a duplicate of the parent selector question; OP is not trying to select a parent element, they are starting from the top of the tree. – Félix Gagnon-Grenier Mar 18 '19 at 19:52
  • 1
    @HamidR. They are not trying to navigate upside. They are starting from the top, and selecting descendant elements, see their code. – Félix Gagnon-Grenier Mar 18 '19 at 19:54

1 Answers1

1

I think you are looking for the Child Combinator selector. ie div > * will target the first descendants of a node. If you chain them you will get the result you are looking for.

.post-body-container > div > div > div {
    width: 418px;
    height: 200px; 
    overflow: hidden;
}
stwilz
  • 1,598
  • 1
  • 15
  • 19
  • Hi. Thank you but is not working since all div-s receive same styling. – John Grischam Mar 14 '19 at 07:26
  • Ooo actually you could use an `:nth-child()` selector which might just work. `.post-body-container > div:nth-child(3) > div > div`. Just replace the `3` with the index you need. – stwilz Mar 18 '19 at 21:57