开发者

styling p tags but not when they have a tags

开发者 https://www.devze.com 2023-02-05 00:10 出处:网络
My first post here and unfortunately it won\'t be that exciting and I need an answer that includes IE6.

My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.

To get space between paragraphs, I'm styling my <p> tags like this:

div.content_cms p {
 margin-top: 0px;
 margin-bottom: 15px;
 padding: 0px 15px 0px 0px;
}

The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:

<p><a href="#">Text</a> </p>

When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:

div.content_cms p a {
 margin-bottom: 0px !important;
}

Which of course does开发者_开发技巧n't work.

I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding

margin-bottom: 0px !important;

to the class I'm adding with jQuery but that didn't work either.

What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?

Thank you.


You can easily do this with jQuery:

$('p').has('a').css('margin-bottom', 0);

Live demo: http://jsfiddle.net/NyjvT/


If you need to set multiple styles, then consider this:

$('p').has('a').addClass('whatever');

CSS:

p.whatever { margin-botttom:0; font-size:20px; ... }


I don't think you can.

Your best bet is to add a class to those particular <p> elements, and override the margin on those:

div.content_cms p.nomargin {
    margin-bottom: 0px;
}

<p class="nomargin"><a href="#">Text</a></p>

If this is not possible on the server side, you could do some jQuery hackery to take care of it.

Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.


This is not possible using only CSS.

CSS (Cascading Style Sheets) works only down the document tree.

The reason for this is performance.

For more info read this:

http://snook.ca/archives/html_and_css/css-parent-selectors

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940

You need to use javascript for that to work.

0

精彩评论

暂无评论...
验证码 换一张
取 消