CSS rules depending on content

Question

I am parsing markdown content using the Marked markdown parser. And it displays each new line as paragraph tags.

So if there is an image tag it will display it as

<p><img src="url" /></p>

If it contains only text it will show as

<p>Sometext</p>

What I want is the paragraph tags containing img tags to have a padding-left of 0 while the paragraph tags with only text to have padding-left of x value.

Is this possible using only css? Or do I have to use javascript as well?

With CSS it would take a parent selector, which doesn't exist, so you need script for that — Ason, Jun 21 '17 at 10:49
CSS is basically agnostic of content (as it should be). If you want to do this, pre-parse the HTML and append classes you can style against e.g. `

...
` — Michael, Jun 21 '17 at 11:00
@Rob That's wrong. It depends on the variant of HTML. XHTML *requires* the tag to be closed. HTML5 allows void elements so it's not required, but [it is still valid if you include it](https://i.stack.imgur.com/D6vMZ.png). — Michael, Jun 21 '17 at 11:43
@Michael XHTML is not the same as HTML and he's not using XHTML. If you can point to any spec for the `` tag that shows a closing slash, I will retract my statement, but I already know you won't be able to. — Rob, Jun 21 '17 at 11:44
@Rob Find me a source which states its use is invalid, as you're the one making the claim. — Michael, Jun 21 '17 at 11:46
@Michael You need to learn to read the spec: https://developers.whatwg.org/edits.html#the-img-element — Rob, Jun 21 '17 at 11:47
@Rob [So do you](http://w3c.github.io/html-reference/syntax.html#void-element). — Michael, Jun 21 '17 at 11:51
@Michael You are pointing to the spec for a void element, not the `` tag. Though the `` tag is a void element, if you would read the entire thing, you will see that the closing slash is not needed, does nothing and is ignored. Also, you pointed to a working draft of something. I pointed to the actual current specification. — Rob, Jun 21 '17 at 11:52
@Rob Yes, I already said that: "it's not required, but it is still valid if you include it." You said "it ***doesn't use it***" as if his markup was invalid. His markup is perfectly valid, it just contains 1 redundant character (*WOW*) — Michael, Jun 21 '17 at 11:56
@Michael Quit making things up I never said. Not using the closing slash is not the same as saying it's invalid. The point is, it's unspecified, does nothing and ignored making it pointless and useless. — Rob, Jun 21 '17 at 11:58
@Rob "it's unspecified" It's specified right there in the link I gave you. Also, there's no need to be upset. — Michael, Jun 21 '17 at 12:31
@Michael And, again, your link is not to the `` element or to the current HTML specification. You only emphasize what I'm saying. There is no closing slash on the tag. You can put one there if you want to but why? It does nothing, isn't needed, means nothing and only takes up space. Do you insert pointless things in your markup often? If you could, why wouldn't you throw three or four slashes in there? — Rob, Jun 21 '17 at 12:37
Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept the answer that helped you the most. — Ason, Jun 22 '17 at 15:25

Ason · Answer 1 · 2017-06-21T11:14:08.973

2

With CSS it would take a parent selector, which doesn't exist, so you need script for that.

With querySelectorAll you can do this

(function() {
  window.addEventListener("load", function() {
    var p_with_img = document.querySelectorAll('p img');
    for (var i = 0; i < p_with_img.length; i++) {
      p_with_img[i].parentNode.classList.add('p_with_img'); 
    }
  }, false);
}());

p {
  padding-left: 30px;
  border: 1px solid gray;
}

.p_with_img {
  padding-left: 0;
}

<p><img src="url" alt=""></p>

<p>Sometext</p>

Updated

Based on how the content is structured, there is this possibility using CSS alone, where you could set a negative margin on the image matching the padding set.

p {
  padding-left: 30px;
  border: 1px solid gray;
}

p > img {
  margin-left: -30px;
}

<p><img src="url" alt=""> Some other text</p>

<p>Some more text</p>

edited Jun 21 '17 at 11:14

answered Jun 21 '17 at 10:55

Ason

79,264
11
79
127

I wouldn't do this with JavaScript. If you know what the content is going to be, there's no reason to do it dynamically on the client-side. Either pre-parse the HTML if your page is static, or add some logic in to your template if your page is created dynamically (e.g. PHP). – Michael Jun 21 '17 at 11:02
2

@Michael I wouldn't either, though here I am simply telling what can be one client side, since any server side language weren't mentioned. – Ason Jun 21 '17 at 11:04

score 0 · Answer 2 · answered Jun 21 '17 at 10:53

0

Currently CSS does not support parent selectors. But you could specify the images contained inside a p tag to have a padding left like:

p > img { padding-left:1rem;}

answered Jun 21 '17 at 10:53

Chirag Ravindra

4,200
1
18
32

gauravmuk · Answer 3 · 2017-06-21T11:14:35.277

-1

You cannot do it using CSS only. You will have to use javascript in this.

Spec: https://www.w3.org/TR/css3-selectors/#selectors

JavaScript:

var images = document.querySelectorAll('p img');

for (var i = 0; i < images.length; i++) {
    var currentImage = images[i];
    currentImage.style.padding = '20px';
}

CSS:

p {
    padding: 30px;
}

edited Jun 21 '17 at 11:14

answered Jun 21 '17 at 10:55

gauravmuk

1,460
12
19

CSS rules depending on content

3 Answers3