Category Archives: CSS

Target and style an HTML element only if it has two classes

Leave a reply

I was working with custom menus in my WordPress theme and assigned each menu item its own class so that I could have a custom background image.

This is basically how WordPress renders the menu (I simplified the number of classes in the example below, as WordPress generates a lot more than that):

1
2
3
4
5
6
7
8
9
10
11

<ul id="sub-menu">
  <li id="menu-item-12" class="custom-class-1 menu-item-12">
    <a href="#">Link 1</a>
  </li>
  <li id="menu-item-15" class="custom-class-2 menu-item-15">
    <a href="#">Link 2</a>
  </li>
  <li id="menu-item-18" class="custom-class-3 current-menu-item menu-item-18">
    <a href="#">Link 3</a>
  </li>
</ul>
<ul id="sub-menu">
	<li id="menu-item-12" class="custom-class-1 menu-item-12">
		<a href="#">Link 1</a>
	</li>
	<li id="menu-item-15" class="custom-class-2 menu-item-15">
		<a href="#">Link 2</a>
	</li>
	<li id="menu-item-18" class="custom-class-3 current-menu-item menu-item-18">
		<a href="#">Link 3</a>
	</li>
</ul>

So if I want to style the menu items at the sub-menu level, the only way to distinguish each menu item (without referencing ID numbers) is via my custom-class-#.

Now, what if I want to make the menu item appear differently if you’re on that page?

Fortunately, WordPress automatically creates a class called current-menu-item. If I were then to write a style like this:

1
2
3
4
5
6
7

.custom-class-1 a {
  color: #f00;
}
 
.current-menu-item a {
  color: #00f;
}
.custom-class-1 a {
  color: #f00;
}

.current-menu-item a {
  color: #00f;
}

Both those classes would have the same specificity and one would take over the other, depending on the order they were written. In a complex setup, this can get very messy, especially if you’re fiddling with a background image and its position.

Turns out, you can actually combine classes, in other words, define a multi-class union.

You can do that like so:

1
2
3
4
5
6
7

.custom-class-1.current-menu-item a {
  color: #f00;
}
 
.custom-class-1.current-menu-item a {
  color: #00f;
}
.custom-class-1.current-menu-item a {
  color: #f00;
}

.custom-class-1.current-menu-item a {
  color: #00f;
}

Now your style will only be applied if your HTML element has both of those classes. I never really had a need for this before today, as there was always another way, but this is good to know!

-RS

CSS clearfix leaves space below container

Leave a reply

I’ve been using clearfix to clear floats for years now, and I always knew that it left a little bit of space after the HTML container that is was applied to. Most of the time I sort of worked around it, but I was curious whether there was a better solution.

Turns out, there is.

The problem is actually with the content of .clearfix:after:

1
2
3
4
5
6
7
8

.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

The period is appended and hence there is a bit of a padding. The way to work around that is to simply change the period into a space, which isn’t rendered by the browser, and hence there’s nothing added to the end of your HTML container.

The complete clearfix then looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.clearfix:after {
  content: ' ';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clearfix {
  display: inline-block;
}
 
html[xmlns] .clearfix {
  display: block;
}
 
* html .clearfix {
  height: 1%;
}
.clearfix:after {
	content: ' ';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

This solution worked beautifully.

-RS

Change your list bullet to a custom character in CSS

2 Replies

Today I was wondering whether I could use a custom character as my list bullet. The requirement was that it was strictly CSS and not a background image.

Turns out, it’s actually pretty straightforward:

1
2
3
4
5
6
7
8
9
10

ul {
  list-style: none;
}
 
ul li:before {
  color: #f00;
  content: '» ';
  font-size: 1.2em;
  font-weight: bold;
}
ul {
	list-style: none;
}

ul li:before {
	color: #f00;
	content: '» ';
	font-size: 1.2em;
	font-weight: bold;
}

What’s interesting to note is that you can define a different style for this character, too, so it doesn’t have to match the rest of the list text.

The only caveat is that defining a margin between the character and your text is a bit trickier, since you can’t accomplish that with margin or padding, unless you wrap your list text in another HTML tag.

Unfortunately you can’t use HTML entities in your content either, but you can use Unicode. The Unicode value for space is \0000a0, so if you add that within your content value, you can achieve additional space.

1
2
3
4
5
6
7
8
9
10

ul {
  list-style: none;
}
 
ul li:before {
  color: #f00;
  content: '» \0000a0';
  font-size: 1.2em;
  font-weight: bold;
}
ul {
	list-style: none;
}

ul li:before {
	color: #f00;
	content: '» \0000a0';
	font-size: 1.2em;
	font-weight: bold;
}

That’s it. Let me know if you come up with an alternative or an improvement in the comments below.

-RS