Why Is My CSS Class Style Not Applying to Specific <Li>'s

Why is my CSS Class style not applying to specific li's?

Try this:

.SL .post .post-det .post-tweet {
    /* DOES APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-tweet a { color:#008ebc; } /* DOES APPLY */

    /* FACEBOOK SHARE ADDON */
    .SL .post .post-det li.post-face {
        /* THIS DOESN'T APPLY */
        background: url(images/post-tweet-icon.png) no-repeat left 2px !important;
    }
    .SL .post .post-det .post-face a { color:#A1A1A0; } /* THIS DOES APPLY */
    /* END FACEBOOK SHARE ADDON */

    .SL .post .post-det li.post-edit {
        /* THIS DOESN'T APPLY */
        background: url(images/post-edit-icon.png) no-repeat left 2px !important;
    }
    .SL .post .post-det .post-edit a { color:#ff0000; } /* THIS DOES APPLY */

Why is my CSS Class style not applying to specific li's?

This rule is pointing to the wrong icon:

.SL .post .post-det .post-face {
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}

images/post-tweet-icon.png should probably be images/post-face-icon.png.

Not sure about the other one... what's the exact HTML that's generated by the edit_post_link() function?

css class not applying styling, but id is applying styling?

This is an indication that another style rule has precedence over that rule. You may want to make that rule more specific by using a.nodecoration which should increase its precedence.

FYI, tools like firebug for Firefox will tell you which rule(s) have the higher precedence.

css not working properly with ul and li items

You can't nest selectors in CSS like you can in LESS or SASS. Just expand your selector statement to .links li:

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    font-family: Tahoma;
    margin: 0;
    padding: 0;
}

.links li {
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
}

If you only wanted to target lis that are direct children of .links you'd use the child combinator: .links > li

Refused to apply inline style because it violates the following Content Security Policy directive

You can also relax your CSP for styles by adding style-src 'self' 'unsafe-inline';

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';" 

This will allow you to keep using inline style in your extension.

Important note

As others have pointed out, this is not recommended, and you should put all your CSS in a dedicated file. See the OWASP explanation on why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).

Complete list of reasons why a css file might not be working

1. Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.

2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

Font Awesome icons are not working, I have included all required files

Under your reference, you have this:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

---

Related Topics