How can I select the likebtn container with CSS?
I have tried several combinations, for example "#meta #likebtn{}" or "#likebtn{}" and it did not work.
Why does this work?
First, you target it as direct as possible:
#likebtn {
/* desired style changes here */
}
Then open your developer tools and check the style inspector; if your CSS rules are being overridden somewhere it will tell you what selector was used to override it.
For instance, this could override your rule:
#meta #likebtn
The next step is to either:
declare your rule with the same selector after the earlier declaration or,
be more precise.
Related
I'm using a lib and i want to remove a property on a class. What is proper way to do it ?
Example :
Lib.css
div {
width: 100%;
}
and custom.css
div {
width: none; //something like that
}
Every rule in CSS has a different default value. Many might have none or auto as default. Check MDN for Reference. Search for 'Initial value'
Example
https://developer.mozilla.org/en-US/docs/Web/CSS/width
Initial value: auto
Edit
You can also use the special value initial, if you don't need to support MSIE browsers.
I encourage you to read about CSS specificity here in the docs:
CSS Specificity: Mozilla Developers and check my answer down below.
There are several ways to overwrite CSS properties from external libraries.
Case 1: if you're using Bootstrap or Zurb Foundation via npm package,
you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.
import 'files from library.sass';
// my settings
$default-width: 80%;
Case 2: if you're using CDN to deliver your library you can use a more specific CSS selector to overwrite given property eg:
to overwrite div selector
div {} ----> div.my-class {}
The second technique, but for sure not recommended is to use !important declaration. But remember, using !important declaration often causes many problems during the development process. It is always better to find a more specific selector than use !important.
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon:
.side-icon{
font-size:28px;
}
BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout.
At the moment I have included the css in the top of a work around sheet (font-awesome-fix.css) using an #import, but I cannot get the 'font: normal normal normal 14px/1 FontAwesome;' to disappear at all.
Please help!
Make your selector more specific :
.side-icon.fa
See here how the priorities of the selectors are calculated.
Hey you should target the before element :
.side-icon:before{
font-size:28px;
}
maybe try adding an id to the specific .side-icon that you need to change the font on.
CSS:
.side-icon #id_goes_here{
font-size:14px;
}
Hope this helps!
The very helpful "!important" usually helps me solve issues like this, or at least determine the root issue:
.side-icon{
font-size:28px !important;
}
Try using more specific css to override the other styles. This may include adding classes or ids so you can chain them together to override.
Examples:
.side-icon.foo{styles}
#bar.side-icon{styles}
If that still doesn't work, you may want to use the !important override to add another layer of specificity. I wouldn't reccomend jumping to use it immediately, but that's mostly because i prefer to code more specifically than using !important everywhere.
Example:
.side-icon{style:value!important;}
If neither of these work, there may be other issues messing with your styles.
This is because of the CSS specificity rule kicks in:
When selectors have an equal specificity value, the latest rule is the
one that counts.
So including your file at the topmost location does not help because the font-awesome.css gets included later and since both .side-icon and .fa are classes on the same element, .fa defined by font-awesome.css got picked up by the browser because .fa was the latest font-size definition.
So, in order to overcome this problem, include your font-awesome-fix.css after font-awesome.css or you could use inline style after the line that includes font-swesome.css
<style>
.side-icon {
font-size: 28px;
}
</style>
or override the .fa font declaration in the same file (if you have control over it) by ensuring that the font-size override comes after the original declaration
or use one of the several ways to become more specific (see CSS specificity[1])
[1] http://www.w3.org/TR/selectors/#specificity
What do the crossed style properties in Google Chrome devtools mean?
While inspecting an element using Chrome's devtools, in the elements
tab, the right-hand side 'Styles' bar shows the corresponding CSS
properties. At times, some of these properties are strike-throughed.
What do these properties mean?
Answer - https://stackoverflow.com/a/3047117/2232902
It means that the crossed-out style was applied, but then overridden
by a more specific selector, a more local rule, or by a later property
within the same rule.
Is there a way to prevent this behavior? ie- Stop the overriding of the property.
Note - I don't have control over the selectors.
Not really, that's how browsers render pages.
You can stick an important on your CSS:
.example {
color: red !important;
}
Or you can use Javascript to change the Style of an element after the page has loaded.
You can add !important before the semicolon in your CSS code.
.example-class {
width: 500px !important;
}
You can read up on it here
I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.
This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.
I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?
If this is the case, is there any way of stopping this?
There are (at least) two means of doing this1, but they're both a little messy.
Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).
Use increased specificity to target the inserted html elements.
body {
/* targets the 'body', and these styles are inherited by its descendant elements */
}
body div {
/* targets all divs that are contained within the 'body' element */
}
body > div {
/* targets only divs that are directly contained within the body element */
/* and these styles will/may be inherited by the children of these divs */
}
The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:
.insertedDiv {
/* this will apply to all elements of class 'insertedDiv', but may be overridden */
/* by a more specific id-based selector such as '#container > .insertedDiv' */
But I can only think of these two at the moment.
CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.
You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.
You should start with a css reset stylesheet. But it has to be modified to only affect your html. So if you wrap your html in a div with a id like "23d4o829" you can use edit each rule in your reset style sheet so it only affects html that is within that div.
For example,
html, body { /* some stuff */ }
table { /* more stuff */ }
becomes
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
and so on. After that, you can have all the css rules you need to control your appearance.
EDIT: I think using iFrames as mentioned by David Thomas is better.