A CSS combinator for representing an AND condition

Question

Let's say I want to apply a CSS rule to all anchors, if and only if:

Their href attribute starts with exactly "http://www."; *and *
Their target attribute has the exact value _blank.

How do I represent this and as a combinator?

If I do just this, it performs an or operation. The syntax itself makes it obvious that it will be an or.

a[href^="http://www."]::after, a[target="blank"]::after {
    content : "->"
}

Is there an and combinator?

Consider the full example below.

p {
  font-weight: bold; 
}

a[href^="http://www."]::after, a[target="blank"]::after {
content : "->"
}

<p>Valid ones that I'd like the rule to match</p>
<a href = "http://www.google.com"
   target = "_blank">Google</a>
<br />
<a href = "http://www.yahoo.com"
   target = "_blank">Yahoo!</a>
<br />

<p>Invalid ones that I'd like the rule NOT to match</p>
<a href = "http://www.microsoft.com">Microsoft</a>
<br />
<a target = "_blank">Anchor without href</a>
<br />
<a href = "NamedAnchor"
   target = "_blank">Amazon within this document</a>
<br />
<a href = "https://www.facebook.com"
   target = "_blank">Facebook</a>
<br />
<a href = "http://apple.com"
   target = "_blank">Apple</a>

<p>Observe how even the anchor <i>Microsoft</i> gets 
selected by the combinator because the anchor starts with 
the right <code>href</code> even though it does not have 
the <code>target</code> attribute</p>

Why dont you define a class and add it to the ones you want to be include that attribure? — Güney Saramalı, Apr 04 '18 at 08:14
`a[href^="http://www."][target="_blank"]::after { content : "->" };` should work doesn't it? — Jeremy, Apr 04 '18 at 08:14
_“Is there an and combinator?”_ - you _already_ “and combined” tag name and attribute selector with `a[href^="http://www."]`, and yet you still need to ask? — CBroe, Apr 04 '18 at 08:17
@CBroe It's not entirely obvious that the components of an attribute selector are malleable as you make it look like. Someone has to point it out to you, as you just did. It doesn't denote a lack of intelligence in someone asking the question. — Water Cooler v2, Apr 04 '18 at 08:27
Added a more specific duplicate, even though the general case already covers it by saying "attribute selectors are no different to any other simple selector". — BoltClock, Apr 04 '18 at 09:48

score 4 · Accepted Answer · answered Apr 04 '18 at 08:14

Sure,

Put both attributes after each other (without a space)

a[href^="http://www."][target="_blank"]

Also note that I fixed the typo, you missed the underscore before blank.

p {
  font-weight: bold; 
}

a[href^="http://www."][target="_blank"]::after {
content : "->";
}

<p>Valid ones that I'd like the rule to match</p>
<a href = "http://www.google.com"
   target = "_blank">Google</a>
<br />
<a href = "http://www.yahoo.com"
   target = "_blank">Yahoo!</a>
<br />

<p>Invalid ones that I'd like the rule NOT to match</p>
<a href = "http://www.microsoft.com">Microsoft</a>
<br />
<a target = "_blank">Anchor without href</a>
<br />
<a href = "NamedAnchor"
   target = "_blank">Amazon within this document</a>
<br />
<a href = "https://www.facebook.com"
   target = "_blank">Facebook</a>
<br />
<a href = "http://apple.com"
   target = "_blank">Apple</a>

<p>Observe how even the anchor <i>Microsoft</i> gets 
selected by the combinator because the anchor starts with 
the right <code>href</code> even though it does not have 
the <code>target</code> attribute</p>

A CSS combinator for representing an AND condition

1 Answers1