CODEWITHSUNDEEP
csscss-selectors
newbieforever
newbieforever

Reputation: 215

CSS: Grouping of declarations

The declarations for .box1 etc. are grouped in the example below.

Can the same be done for .box1 a etc. too?

.box1, .box2, .box3 {
   color: red; }

.box1 a {
   text-decoration:none; }

.box2 a {
   text-decoration:none; }

.box3 a {
   text-decoration:none; }

Note: I don't mean box1 a, box2 a, box3 a, is there something simpler than that?

Upvotes: 0

Views: 93

Answers (2)

David Archibald
David Archibald

Reputation: 1518

Matches

There are many ways to shorten this CSS:

.box1 a, box2 a, box3 a {
  text-decoration:none;
}

However, most require more HTML. The :matches pseudo-class is the only way without adding more classes. Here's how it looks:

:matches(.box1, .box2, .box3) a {
  text-decoration: none;
}

Other methods

However, this doesn't really work when your HTML looks like this:

<div class="box1"><a href="..."></a></div>
<div class="box2"><a href="..."></a></div>
<div class="box3"><a href="..."></a></div>
<div class="box4"><a href="..."></a></div>
<div class="box5"><a href="..."></a></div>

If you glance at this, you will probably assume that all of these get about the same styling and with slight styling differences, that's a problem if someone wants to edit your code. Why not just add another class to all of the elements that you want to be affected? This is what it'll become:

CSS

.container-box a {
  text-decoration: none;
}

HTML

As an added benefit, the HTML is more telling too:

<div class="box1 container-box"><a href="...">...</a></div>
<div class="box2 container-box"><a href="...">...</a></div>
<div class="box3 container-box"><a href="...">...</a></div>
<div class="box4">...</div>
<div class="box5">...</div>

It's obvious that the first three boxes have more styles than the last 2.

Yes, complex selectors are needed, but another class simplifies CSS and makes it easier to tell which elements are affected.

Tag Selector

div a {
  ...
}

HTML

This will select all divs with an a tag inside so if you have all your divs have a tags inside, don't use this. However, the HTML will look like this:

 <div class="box1"><a href="...">...</a></div>
 <div class="box2"><a href="...">...</a></div>
 <div class="box3"><a href="...">...</a></div>
 <div class="box4">...</div>
 <div class="box5">...</div>

Container

You also can make a container for the elements and select them that way.

CSS

.container div a {
  ...
}

HTML

<div class="container>
  <div class="box1"><a href="..">...</a></div>
  <div class="box2"><a href="..">...</a></div>
  <div class="box3"><a href="..">...</a></div>
</div>
<div class="box4">...</div>
<div class="box5">...</div>

Again it's obvious which are being selected and which aren't.

Upvotes: 2

user663031
user663031

Reputation:

Yes, use :matches.

:matches(.box1, .box2, .box3) a { text-decoration: none; }

Here is the spec. Here's an article about :matches. Here's the MDN page, which refers to it as :any, since at the moment it is available under the vendor-prefixed versions :-moz-any and :-webkit-any. Having to write out both of those sort of defeats the point of saving keystrokes, though.

If you are drinking the CSS pre-processor Kool-Aid, then in most of them you can do .box1, .box2, .box3 { a { text-decoration-none; } }.

You could also in theory use XPath (via document.evaluate), with an expression such as

//input[matches(@id, 'left\d*right')]

That is XPath 2.0 which might or might work in your browser's version of document.evaluate. In XPath 1.0, you'd need an ugly workaround:

//*[starts-with(@id, 'left') and ends-with(@id, 'right') and 
  boolean(number(substring-before(substring-after(@id, "left"), "right"))]

Upvotes: 2

Related Questions