Simplify CSS Statement?

Question

I'm building a joomla-website and I have problems with one CSS statement. The website uses several menus which have different names. Because of that, I would have to do something like this:

a#ext-gen1.ux-menu-link-level-0.ux-menu-link-parent.current,
a#ext-gen2.ux-menu-link-level-0.ux-menu-link-parent.current,
a#ext-gen3.ux-menu-link-level-0.ux-menu-link-parent.current,
a#ext-gen4.ux-menu-link-level-0.ux-menu-link-parent.current {
    //...
}

To simplify this, I was thinking of replacing the numbers with a *, which would work if the statement is treated like a shell-command. The result would be this:

a#ext-gen*.ux-menu-link-level-0.ux-menu-link-parent.current {     
    //...
}

Unfortunately, this doesn't work. So how does something like this in CSS work?

Edit: The HTML-File looks like this, if that is important:

<a href="./some/link.html" class=" ux-menu-link-level-0 current ux-menu-link-parent " title="" id="ext-gen5">
some text
</a>

Why not select class only? .ux-menu-link-level-0.ux-menu-link-parent.current { ... } — xjedam
– xjedam, Commented Oct 18, 2014 at 13:19
Because that doesn't work. I need to tell the style-sheet that it's a link. In your example the "a" is missing. — Exceen
– Exceen, Commented Oct 18, 2014 at 13:26
Not sure why it wouldn't work, but you can add the a selector: a.ux-menu-link-level-0.ux-menu-link-parent.current { ... } — xjedam
– xjedam, Commented Oct 18, 2014 at 13:31
Have you got the context for this? without seeing the source and the other css/html, it's difficult to tell what would be appropriate. — i alarmed alien
– i alarmed alien, Commented Oct 18, 2014 at 13:40

Rob · Accepted Answer · 2014-10-18 13:38:12Z

3

You can try the "begins with" CSS selector. This will select all elements with an 'id' that begins with "ext-gen".

a[id^="ext-gen"] {}

edited Oct 18, 2014 at 13:38

answered Oct 18, 2014 at 13:20

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Exceen Over a year ago

I have really no idea how to exactly implement this and if I just copy and paste this, it doesn't work.

Rob Over a year ago

@Exceen Edited the CSS cause I didn't use your exact starting id name.

Zach Saucier Over a year ago

This might be being overridden by some ID selector given it has less specifity. @Exceen you should use your browser's developer tools to see if that is the case

Rob Over a year ago

@ZachSaucier He copy/pasted my original CSS which didn't have the exact id name. That's more likely why it didn't work for him the first time and I don't think he tried it the corrected way.

Exceen Over a year ago

This doesn't work either :/ | Also: I really need to place the ".current" there, because I want to select only the currently browsed menu-point.

|

DividedByZero · Accepted Answer · 2014-10-18 13:33:40Z

1

a.ux-menu-link-level-0.ux-menu-link-parent.current{} should do fine.

div.b {
  width: 100px;
  height: 100px;
  background: black;
}
div#d1 {
  background: red;
}

<div class="b" id="d1"></div>
<div class="b" id="d2"></div>

answered Oct 18, 2014 at 13:33

DividedByZero

4,4212 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Simplify CSS Statement?

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related