We often find ourselves in situations when we want to overwrite a style we don’t have access to, it’s hard to find or we want to rewrite with CSS a style that has been written in the HTML code or has been set with Javascrpt.
\nIn this article we’re going to discuss the strength of different style declarations and how can we overwrite them.<\/p>\n
Let’s say we have the sentence below to start with.<\/p>\n
<p<\/span>><\/span>This is our <span<\/span> id<\/span>=\"highlighted\"<\/span>><\/span>demo text<\/span<\/span>><\/span>.<\/p<\/span>><\/span>\r\n<\/pre>\n
\nTo highlight the span tag we would normally use CSS styles like this:<\/p>\n
#highlighted<\/span> {\r\n color<\/span>: red<\/span>;\r\n}\r\n<\/pre>\nWe can overwrite this if we define another color after this line in the stylesheet because always the lower rules apply. In this case the text will be blue:<\/p>\n
#highlighted<\/span> {\r\n color<\/span>: red<\/span>;\r\n}\r\n#highlighted<\/span> {\r\n color<\/span>: blue<\/span>;\r\n}\r\n<\/pre>\nWe can target more accurately the span, to set it’s color. In both cases below the color of the highlighted text will be green.<\/p>\n
span<\/span>#highlighted<\/span> {\r\n color<\/span>: green<\/span>;\r\n}\r\n#highlighted<\/span> {\r\n color<\/span>: red<\/span>;\r\n}\r\n\r\np<\/span> #highlighted<\/span> {\r\n color<\/span>: green<\/span>;\r\n}\r\n#highlighted<\/span> {\r\n color<\/span>: red<\/span>;\r\n}\r\n<\/pre>\nUse the !important<\/em> sign to override a property, regardless of its position in the document. An “!important” declaration is always stronger than one without it. It’s recommended to use these only if it’s really necessary. In our example below the text will be red.<\/p>\np<\/span> #highlighted<\/span> {\r\n color<\/span>: green<\/span>;\r\n}\r\n#highlighted<\/span> {\r\n color<\/span>: red<\/span> !important<\/span>;\r\n}\r\n<\/pre>\nHTML inline styles are stronger than the CSS so in this case the text will be grey, but we can overwrite this with an !important rule from the stylesheet.<\/p>\n
p<\/span> #highlighted<\/span> {\r\n color<\/span>: green<\/span>;\r\n}\r\n<\/pre>\n<p<\/span>><\/span>This is our <span<\/span> id<\/span>=\"highlighted\"<\/span> style<\/span>=\"color: grey;\"<\/span>><\/span>demo text<\/span<\/span>><\/span>.<\/p<\/span>><\/span>\r\n<\/pre>\nIn some cases the style is reset with JavaScript \/ jQuery and we can’t overwrite it with the stylesheets. In this case we can use the strongest CSS declaration which overwrites everything:<\/p>\n
#highlighted<\/span>[style] {\r\n color<\/span>: yellow<\/span> !important<\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"