Overriding a pseudo element

Question

So I have a list that starts with a FontAwesome icon and then some text, which I'm trying to style individually (size and color). For example I want the Skype icon to be #00abeb in color

This is the HTML code:

<ul class="contact-entries">
<li class="icon-mobile-phone">Mobile</li>
<li class="icon-phone">Landline</li>
<li class="icon-skype contact-skype"><a href="skype:misc?chat">misc</a></li>
<li class="icon-envelope-alt"><a href="mailto:contact@misc.org" title="Email">contact@misc.org</a></li>
<li class="icon-map-marker">Address</li>
</ul>

The main CSS styling is this:

.contact-entries > li { position:relative; }
.contact-entries > li:before { position:absolute; left:0; top:0; color: white; font-size:20px; }

And I created this myself to change the size and color of the Skype icon, but it won't work:

.contact-skype { 
    color: #00abeb !important;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 18px !important;
}

Any ideas?

Use `#background-color: #00abeb !important;` instead of `color: #00abeb !important;` — soundswaste, Jun 26 '13 at 18:41

score 0 · Answer 1 · answered Jun 26 '13 at 18:41

0

.contact-entries .icon-skype.contact-skype { 
    color: #00abeb;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 18px;
}

Should do it if no !important elsewhere or heavier selector on li .

answered Jun 26 '13 at 18:41

G-Cyrillus

101,410
14
105
129

Which part of the original code should I substitute with this one? – user2247336 Jun 27 '13 at 00:52
wich rule are you actually trying to override ?i do not see any in the bit you gave. – G-Cyrillus Jun 27 '13 at 03:55
The icons are white color because of .contact-entries > li:before I'm trying to override it and make the Skype icon #00abeb. Here is the actual website: [www.cyper.org](http://cyper.org) - the Contact Us section. – user2247336 Jun 27 '13 at 12:08

score 0 · Answer 2 · answered Jun 26 '13 at 18:43

0

If you are intending to change the background color. You should do..

background-color: #00abeb !important;

instead of:

color: #00abeb !important;

answered Jun 26 '13 at 18:43

khollenbeck

16,028
18
66
101

No, I'm trying to change the color of the text and the icons individually. The icons are just a vector font, which can be fully styles via CSS. – user2247336 Jun 27 '13 at 00:51

score 0 · Answer 3 · edited May 23 '17 at 12:21

If you want to set the color of the link you can just set the color or your 'a' elements to 'inherit' to have the link inherit the color from the li. Here's a fiddle for that:

http://jsfiddle.net/hVurc/

.contact-skype {
    color: #00abeb;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
}
a{
    color:inherit;
}

Or you could use a child combinator selector like this:

.contact-skype > a{
    color: #00abeb;
}

If you want it to have that background-color, just set the background-color to #00abeb. Here's a fiddle for that as well:

http://jsfiddle.net/RwTHP/1/

.contact-skype {
    background-color: #00abeb;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
}

Edit: Here's a link that might be helpful.

Why can't I override existing pseudo-elements?

Here is the actual website: [www.cyper.org](http://cyper.org) - the Contact Us section. I want to make the Skype icon #00abeb in color, the text all white and each icon to have different font size, because some are bigger than others by design. — user2247336, Jun 27 '13 at 00:53

Overriding a pseudo element

3 Answers3