Find CSS Not Applied Rules

Find CSS not applied rules

Firefox, add extension Dust-Me Selectors. It does just that

Some CSS rules are not applied from external link

Try putting just the code that is not running on the bottom of your CSS file. Sometimes, the code does get applied but then overwritten after your browser runs the rest of the CSS file. So your CSS file should look like this:

.input-span {
display: inline-block;
border: none;
padding: 1px;
outline: none;
text-align: center;
min-width: 100px;
font-style: italic;
border-bottom: 1px solid grey;
}

.input-span:focus {
border-color: blue;
}

table.table {
border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
border: 2px solid black;
}

.footer {
margin-bottom: 50px;
}

@media print {
.footer {
page-break-before: always;
}
}
*:not(small) {
box-sizing: border-box;
font-family: 'Palatino Linotype';
font-size: 30px;
}

Is there a way to check which CSS styles are being used or not used on a web page?

Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.

Why is my CSS style not being applied?

Have you tried forcing the selectors to be in the front of the class?

p span label.fancify {

font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}

Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:

<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>

You would style it like this:

div#first p#myParagraph {
color : #ff0000;
}

Just to make a complete example using a class:

div#first p#myParagraph span.bolder{
font-weight:900;
}

For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html

CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/

Is there a way to find out where a css rule is coming from?

You may use web inspector in Chrome.

Right click on failing element and select inspect element.

You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.

Next you need to expand "Computed Style" tab and look for offending style.

When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.

CSS rules are simply not applied in Internet Explorer. Where should I look for more info?

  1. Just on a lark, try removing all the imports then putting them back in one by one.
  2. Run your CSS through the W3C CSS Validator.
  3. Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.

CSS rule not being applied

whack an !important after the style you want to enforce.

Example:

p.my-style {
color:#000;
text-decoration:none !important;
}


Related Topics



Leave a reply



Submit