CODEWITHSUNDEEP
htmlcss
Exceen
Exceen

Reputation: 765

Simplify CSS Statement?

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>

Upvotes: 2

Views: 75

Answers (2)

Rob
Rob

Reputation: 15150

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"] {}

Upvotes: 3

DividedByZero
DividedByZero

Reputation: 4391

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>

Upvotes: 1

Related Questions