Check if css class exist and can be applied

Question

I am using lipis flag icon set, and angularjs. I want to check whether a given flag exist is the css. What is the best approach to this?

Right now I am just applying the class and if the flag does not exist, then nothing is shown.

 <i class="flag-icon" ng-class="'flag-icon-' + dialog.model.item.code | lowercase"></i>

I would however like to show some text like "No flag" if the class does not exist in css. To do this I need some way to check whether the given flag-icon-xx exists or not, but how do I do this?

Duplicate stackoverflow.com/questions/21703404/…

FrancoisBaveye
– FrancoisBaveye

2015-04-20 14:20:01 +00:00
Commented Apr 20, 2015 at 14:20 — FrancoisBaveye
– FrancoisBaveye, Commented Apr 20, 2015 at 14:20
@Heru-Luin that's a pretty terrible accepted answer.

James Donnelly
– James Donnelly

2015-04-20 14:20:38 +00:00
Commented Apr 20, 2015 at 14:20 — James Donnelly
– James Donnelly, Commented Apr 20, 2015 at 14:20
console.log(document.styleSheets); may help you :)

FrancoisBaveye
– FrancoisBaveye

2015-04-20 14:21:19 +00:00
Commented Apr 20, 2015 at 14:21 — FrancoisBaveye
– FrancoisBaveye, Commented Apr 20, 2015 at 14:21

James Donnelly · Accepted Answer · 2015-04-20 14:34:02Z

6

Pure CSS Solution for Font-Based Icons

Edit: Looks like the icon set you're using is background-based, so please see the second part of my answer for a potential solution. I'll keep this part here for future readers.

If you're using a font-based icon set you can do this with pure CSS relatively easily. Simply have a base selector which applies the text "No flag" to either the ::before or ::after pseudo-element (depending on which the font-based icon set uses itself):

.flag-icon::before {
    content: 'No flag';
}

As long as our other font-based icons are declared after this declaration or have higher specificity, their own content property will override this.

Example

.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '★'
}

<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>

Pure CSS Solution for Image-Based Icons

If it isn't a font-based icon set you're using, you can still apply a similar approach to background-based icon sets. For this, we still the same ::before or ::after pseudo-element as we've used above, but override this completely on valid icon classes:

.flag-icon::before {
    content: 'No flag';
}

.flag-icon-1::before,
.flag-icon-2::before,
... {
    content: '';
}

Example

.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '';
}

.flag-icon-star {  
  background: url(http://i.imgur.com/yiJrwe0.png) no-repeat;
  display: block;
  height: 131px;
  width: 100px;
}

<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>

edited Apr 20, 2015 at 14:34

answered Apr 20, 2015 at 14:22

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

2 Comments

Casper Thule Hansen Over a year ago

Hi James, it is showing both the flag and the "No flag" text now, any idea on how to fix this?

Casper Thule Hansen Over a year ago

Ahh, so I would need to add .flag-icon-xx::before {content: ' ';} to all the valid flags? Since I would still like to use the lipis project, this is not a very suitable solution. The images are, as far as I can tell, set as background image.

Collectives™ on Stack Overflow

Check if css class exist and can be applied

1 Answer 1

Pure CSS Solution for Font-Based Icons

Example

Pure CSS Solution for Image-Based Icons

Example

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Pure CSS Solution for Font-Based Icons

Example

Pure CSS Solution for Image-Based Icons

Example

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related