Target an element when not inside another element (i.e., all anchors not inside paragraphs)

Question

I'm trying to style all a tags that are not inside of a p tag. Here's what I'm thinking:

p {
  font-size: 1.25rem
}
a {
  color: blue;
  text-decoration: underline;
}
:not(p) a {
  font-size: .75rem;
}

<div>
  <p>There is a <a>link</a> inside this paragraph</p>
  <a>Regular Link</a>
</div>

How can I fix this? Can you not use the :not() selector without a tag in front of it? (no js/jQuery solutions please)

JsFiddle

Why use `:not()` at all, when you can simply use: `a { font-size: .75rem; } p a { font-size: inherit; }`? — David says reinstate Monica, Oct 26 '16 at 18:09
The first a is still child of the grandparent `div` element ... you may need to check for direct descendants with `>` https://jsfiddle.net/mcfaLL42/2/ — DaniP, Oct 26 '16 at 18:09
@DaniP: nice catch! CSS Apprentice: had you included your relevant code in your question you could have been helped a great deal faster. — David says reinstate Monica, Oct 26 '16 at 18:10
@DaniP - Why didn't `:not(p) a` work though, and yet `:not(p) > a" does? Doesn't the first solution still have better specificity? That's more of what I was looking for though, thanks a ton! @DavidThomas - Sorry about that, didn't think about how relevant it was at the time. — CSS Apprentice, Oct 26 '16 at 18:25
@DavidThomas - Oh, and I mentioned the reason in a comment to Michael_B. My reasoning: *"going the `:not(p)` route would keep me from having to write `inherit` inside `p a` for all the styles that I declare in a `p` tag and thus would ideally be more efficient concerning file size. That's why I was hoping to use the other technique above a direct declaration."* — CSS Apprentice, Oct 26 '16 at 18:29
Your selector will match any `a` tag inside a container that isn't a **p** tag ... your first a tag is child of p but also child of div or body tags so it is selected too.... with the `>` you skip the deepest levels so if it will target only the a tags that are direct childs of non p containers — DaniP, Oct 26 '16 at 18:31

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

Why not style all a tags, then apply different styles to all a tags inside p tags?

p {
  font-size: 1.25rem
}
a {                             /* 1 */
  color: blue;
  text-decoration: underline;
  font-size: .75em;
}
p a {                           /* 2 */
  color: green;
  text-decoration: none;
  font-size: 2rem;
}

<div>
  <p>There is a <a>link</a> inside this paragraph</p>
  <a>Regular Link</a>
</div>

Notes:

This selector targets all anchor tags in the document
This selector overrides the first selector due to higher specificity, targeting only anchor tags in paragraph elements.

edited May 23 '17 at 12:16

Community

1
1

answered Oct 26 '16 at 18:09

Michael Benjamin

265,915
79
461
583

This is definitely a valid option, but going the `:not(p)` route would keep me from having to write `inherit` inside `p a` for all the styles that I declare in a `p` tag and thus would ideally be more efficient concerning file size. That's why I was hoping to use the other technique above a direct declaration. – CSS Apprentice Oct 26 '16 at 18:21
1

CSS Selectors 3 doesn't provide for [parent selectors](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). An alternative is JS/jQuery. Or you can wait for the `:has()` pseudo-class coming in [Selectors 4](https://drafts.csswg.org/selectors-4/#relational). – Michael Benjamin Oct 26 '16 at 18:26
Oh wow, `:has()` will open up a TON of new options! Exciting times, thanks for sharing that! – CSS Apprentice Oct 26 '16 at 18:28

score 0 · Answer 2 · answered Oct 26 '16 at 18:09

0

just use this for a inside the p:

p a {
//*Your style there*/
}

and this for a outside p

a {
//*Your style there*/
}

answered Oct 26 '16 at 18:09

paolobasso

1,958
8
23

Target an element when not inside another element (i.e., all anchors not inside paragraphs)

2 Answers2