CODEWITHSUNDEEP
htmlcsscss-selectors
Romainpetit
Romainpetit

Reputation: 906

CSS terminology: targeting complex combinations of tags

I'm trying to figure out what to call tags in CSS in order to build nice paragraphs.

For now, this is what my code looks like: 

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
li p, blockquote p {
    margin: .5em 0;
}

And my HTML: 

<p><strong>A little title</strong></p>
<p>Content text which can be single line or big block aswell.</p>

Referring to the code above, I want to call the

     <p><strong>g</strong></p>

content, so that it doesn't inherit from p as previously entered.

I tried :

p strong which do call every strong located in a p but only inside of it. I mean : only on strong, after the p container has been set. Could maybe work with negative margin but a bit messy ...

p:not(p strong) which sounds like a solution, but doesn't fit that case since the strong is still heriting from the p styling.

Is there any way to do this with CSS?

--- EDIT ---

I used the p >strong:only-child for now, which is calling the strong tags located alone in p tags. To give the good visual rendering, I applied a negative left margin of the indent size ... as a temporary solution.

Upvotes: 1

Views: 176

Answers (2)

ayyp
ayyp

Reputation: 6598

You may want to try p:not(). Further documentation is here: http://reference.sitepoint.com/css/pseudoclass-not

Update: Unfortunately the strong part continues to inherit the p tag styling. Your best bet would be to clear it in a selector such as p strong and then apply the rest of the styles that you want there.

Update 2: Turns out you ARE able to use the :not psuedo-selector. An example here: http://jsfiddle.net/Mf5uc/1/

Upvotes: 1

c-smile
c-smile

Reputation: 27460

As far as I understand you want something like "contains":

p:contains(b) { line-height: 2em; }

but there is no such a selector in CSS in principle. If you want to know why then read my article "CSS, selectors and computational complexity"

Options for you:

a) Either to use classes like p.header, p.normal or

b) define style for the <b> rather than for <p> itself:

p > b:first-child:last-child {
  font-size: 2em;
}

Let me know if you will need comments on p > b:first-child:last-child selector.

Upvotes: 1

Related Questions