Possible to set different margin when paragraph has ?

Question

<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

Having above html. Is it possible with css to achieve this?

p {margin-bottom:24px;}
p when having <strong>....</strong> set margin-bottom:5px ?

See my answer (that I figured out thanks to you guys!). Fiddle here: https://jsfiddle.net/g7mux9x0/ — bestprogrammerintheworld, Jul 23 '16 at 07:14

score 1 · Answer 1 · answered Jul 23 '16 at 06:42

1

No, you cannot select parents - in this case p is parent of strong but you can set strong'a styles to fit your needs. Also remember that you can set p styles to be flexible container of strong.

answered Jul 23 '16 at 06:42

Oskar Szura

2,210
5
29
40

score 1 · Answer 2 · answered Jul 23 '16 at 06:45

1

You can do it with JS

$(document).ready(function(e){

  $('p').has('strong').css('margin','100px');

});

p{ margin:20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

answered Jul 23 '16 at 06:45

Kan412

707
5
12

The question was about pure css but this js solution would actually work. Thank you! – bestprogrammerintheworld Jul 23 '16 at 06:53
1

Not really sure if its possible with CSS but i will keep looking and will let you know if i find it :) – Kan412 Jul 23 '16 at 07:02
See my own answer :-) – bestprogrammerintheworld Jul 23 '16 at 07:15
1

Yeah question was wrong :D. I am glad you got it right. Cheers :) – Kan412 Jul 23 '16 at 07:17

frnt · Answer 3 · 2016-07-23T07:31:15.237

0

P tag has margin-bottom of 24px and strong 5px.

p {
  margin:0px 0px 24px 0px;
  background:#f22;
 }
 strong{
   background:#ccc;
 }
 p > strong{
   display:inline-block;
   margin-bottom:5px;
 }

<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>
<p>
la la la la la la
</p>
<p>
<strong>Hello</strong>
<p>
<p>
la la la la la la
</p>

edited Jul 23 '16 at 07:31

answered Jul 23 '16 at 07:07

frnt

7,861
2
16
23

Sumit patel · Accepted Answer · 2016-07-23T07:02:33.323

-2

Update css

p
{
  margin-bottom: 50px;
}

p > strong
{
  margin-bottom: 100px;
  display:block;
}

Demo Fiddle

edited Jul 23 '16 at 07:02

answered Jul 23 '16 at 06:43

Sumit patel

3,115
8
26
49

That's not what he meant - he wanted to make a coditional parent selector. – Oskar Szura Jul 23 '16 at 06:44
@Sumit patel Your code adds `margin-bottom` to `` but when `
` has `` inside then margin should be added to `
` not ``
– Kan412 Jul 23 '16 at 06:59
If I set p {margin-bottom:50px;} margin bottom of p would be 50px and strong would have a bottom margin of 100px (in your example). I want p to have margin bottom 50px and when p has strong it should have 100px. – bestprogrammerintheworld Jul 23 '16 at 07:00
ok.. i once again answer updated your requirement .. try it – Sumit patel Jul 23 '16 at 07:03
I am still wondering how this answer is getting upvotes. Something fishy :D – Kan412 Jul 23 '16 at 07:03
Misleading answer. he is not going to set margin for strong. – Faraz Sh. Jul 23 '16 at 07:04
hello "Tympaaz", "Faraz Sh"., "Raman Sahasi "see the answer .. what want to @bestprogrammerintheworld ... read carefully question & answer all guides – Sumit patel Jul 23 '16 at 07:31
@Sumitpatel: Based on the question he asked your answer was wrong and we were trying to help you understand it better. We cant really do anything if OP framed the question wrong and you get the answer by fluke. At the end of the day, We all are here to help each other and improve over selves so chill – Kan412 Jul 23 '16 at 07:39

Possible to set different margin when paragraph has ?

4 Answers4