I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.
Related
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
How do I change the mat-panel-description area (and only the mat-panel-description area so it is a different background color (e.g. red)?
I've tried various styles but cannot seem to get the entire background of that particular background to change (while keeping the header and footer their original colors).
Using chrome dev tools, adding a background-color to the following .mat-expansion-panel-body works, e.g.:
.mat-expansion-panel-body {
background-color: red;
}
But this does not work when I try to put this in my stylesheet (or even via inline style).
Note: This also works when I put this in my global stylesheet (styles.css) -- but I want to avoid doing this if possible.
Here is a screenshot where I have a red circle indicating the area I want to change the background-color for.
Thanks
in Angular use /deep/ to change styles for material component to force the style down with Emulated encapsulation without changing the encapsulation, so try this:
/deep/ .mat-expansion-panel-body {
background-color: red;
}
or ::ng-deep since /deep/ is deprecated
::ng-deep .mat-expansion-panel-body {
background-color: red;
}
add encapsulation property into your #Component decorator
encapsulation: ViewEncapsulation.None
and then you can simply add styles in your css file.
.mat-expansion-panel-body {
background-color: red;
}
Hope this helps!!
I ended up solving this using global styles, but using a component-specific class as a parent (to prevent overriding all occurrences of .mat-expansion-panel-body)
I chose this method because I didn't want to use deprecated ng-deep or mess with my component's encapsulation.
expansion-overview-example.component.html
<div class="expansion-overview-example">
<p>This is the primary content of the panel.</p>
</div>
styles.css
.expansion-overview-example .mat-expansion-panel-body {
background-color: red;
}
This is my block of code in the HTML part
<header>
<div class="top_line"></div><br/>
<div class="container">
<div class="abcd">Über<span style="color:#2773AE">Tech</span></div>
<div class="top_line"></div>
</div>
</header>
I am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code:
.top_line {
background-color: #2773AE;
height: 5px;
}
.abcd {
font-size:50px;
line-height:25px;
}
Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?
Thank You
You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.
Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.
for example :
.abcd {
font-size:50px !important;
line-height:25px !important;
}
Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span
As an example I got a css class which applies to all labels within my website.
label
{
font-size: 18px;
}
Now after i install a external JS plugin i find that the plugin itself is affected by my base css.
<div>
<div class="plugin" />
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
The plugin has its own stylesheet so how can i prevent my base css style touching any elements within the plugin div?
EDIT
I must add that label was a very simple example. The actual layout is more complex with global styles touching various elements.
Don't make your css too general, try to be as specific as possible when you want to style only some of your elements. If you can't select your elements without affecting the plugin's elements add a class to them.
label{ /* too general, don't use this */
/* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
/* ... */
}
label.noplugin{ /* use a class on non-plugin elements */
/* ... */
}
div:not(.plugin) > label{ /* affecting only children of div which are NOT
tagged with the plugin class */
/* ... */
}
So in your case a better way to style your label would be
<div>
<div class="plugin">
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
</div>
CSS:
*:not(.plugin) > label
{
font-size: 18px;
}
Please note that :not is unfortunately not supported by IE ≤8.
You need to do two things.
i) Give your parent container ID
ii) And style child label of container.
Here is fiddle workout.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.