Anyway to "reset" styles? - css

An existing style sheet has a whole bevy of styles defined for the A element strewn all over the place. I find it pretty difficult to track and trace everything.
I then have:
<ul class="nav navbar-nav navbar-right">
<li>xxxxx</li>
<li><a href='...'>yyyyy</a></li>
</ul>
I don't want the A element above to inherit what are in the style sheet. I also do not want to remove the classes for the UL element as there are other side effects. I know I can override the A styles by specifically setting inline styles, but that would be a lot to override. Is there a way to make that A element discard what is defined for A and have every style at its default?

I'm afraid you can't...
Have you thought about javaScript? You could create a snippet that works like this:
function resetCss(element) {
element.style.color = '#000000';
element.style.textDecoration = 'none';
// ...
}
function reset() {
var elements = document.getElementsByTagName('*');
for (element in elements) {
if (element.className == 'reset') {
resetCss(element); // This function is called on every tag with the reset class.
}
}
}
Call reset() when the DOM is ready and give the class reset to all your to-be-reset elements. Example: Link.

No it's not possible I'm afraid (with standard CSS anyway, maybe with a precompiled like LESS). The "normal way" here is to add an identifier to and make a #mylist a { }. You would then have to change each attribute you don't like.
Of course the best thing would be to start over and make the CSS less of a living hell :)

There is one possibility that you can try. It way can rewrite (overload) styles every that you need. Use strict selecting via ">" selector in styles from you body element to you target 'a' (It's important write strict rules from body, but in several case don't need). And place this overloads style after all - rule for overloads styles - should be placed after all or last included. I use this method every day and with bootstrap, select2, foundation, and other libs, i just overwrite styles.
Example (Just consider that you html example placed in "body" and "header" elements):
body > header > .nav.navbar-nav.navbar-right > a { /* You styles that overload all previous for this element */}

Related

What scoped CSS selector allows me to override the mdDialog container width?

Given a typical Angular Material dialog, which has a max-width of 80vw set on .mat-dialog-container, how can I formulate a selector to override it? I'd like a true full-width dialog.
The problem is scoping--Angular-CLI compiles component CSS with scope attribute selectors.
Therefore, this:
.parent .child
becomes:
.parent[some_attr] .child[some_other_attr]
However, this particular element doesn't seem attached to any component--it doesn't have a dynamically-generated attribute on it.
I've attempted overrides in both the dialog stylesheet and the host component's stylesheet with no success.
Angular special selectors
Dialog Plunkr
Let me try again. I'm not doing a good job of explaining the issue.
Let's say I add this to my host component stylesheet:
.mat-dialog-container {
max-width: 100%;
}
I have a build watch running, so the app is recompiled. The CSS output is now this:
.mat-dialog-container[_ngcontent-c6] {
max-width: 100%;
}
However, that element doesn't actually have the attribute _ngcontent-c6 on it. That attribute is applied to other elements which are inside siblings of ancestors of .mat-dialog-container. The selector is just wrong.
If I add that CSS to the dialog component's stylesheet, something similar happens, but with a different attribute ID.
If you can add an id to your main body tag and you want it to be on all of these dialogs you can use this
<style>
#bodyID .mat-dialog-container {
max-width:100vw;
background-color: blue;
}
</style>
It will override the current style, at least in the plunker you supplied.
If you need specific style for each dialog, did you look into this?
how-to-style-child-components-from-parent-components-css-file
You don't need a body id, because as you've mentioned the selector is rewritten by Angular such that it stops matching the element altogether.
But yeah it seems the only way around this is to just throw your hands up and forget about component stylesheet scoping and add your CSS rule to the page stylesheet. The caveat, of course, is that this rule needs to be added to every page that uses the component, which can be seen as absurd depending on what your component is intended to be used for and by whom.

CSS selector match certain value in style attribute

How can I write css selector for an element with specified inline styles?
For example:
<div style="top: 0; left: 0;">link1</div>
<div style="left:3px; top:0;">link2</div>
<div style="top:3px; left:0;">link3</div>
Then, I want to select link1 and link2 since they all have top:0.
I'm not sure about if I should place a space in div[style*="top: 0"] or not. How does the style attribute be setted? Will browser format the string in any format automatically?
Why I need this: I know query an element based on style attribute is not a good idea. But I'm writing user style, while I cannot modify the html page or javascript. The web page only modified the style attribute when events triggered.
Since you mentioned you have no way to change the HTML, one hacky way you can do it is to account for both cases, I guess:
div[style*="top: 0"], div[style*="top:0"] {
/* styles here */
}
An alternative would be to use JS/jQuery if you are willing.
Example for jQuery:
$('div').filter(function() {
return parseInt($(this).css('top')) == 0;
}).addClass("yourNewClass");
Edit: Didn't notice that you mentioned you cannot alter the page via JavaScript as well, but well, leaving this in just in case.

Using BEM CSS with Angular Directives

I've been using BEM style CSS to style my angular directives and usually use replace: true to so that my Block level class can be on the "root" of the custom element. This makes it so that I can write all my CSS primarily with classes.
However, replace: true sometimes causes issues (having two ng-if, etc...) and is now marked as deprecated. So I'm starting to try to stay away from replace completely.
But now I'm having trouble applying BEM to these elements that have an actual custom tag the DOM -- now I have to use a tag name instead of a class name, which means I can't really use BEM anymore (since I'll have to use the tag name since I can't apply classes directly to my element in my template). Additionally, using modifiers on my custom element now seems impossible, as does using sibling CSS selectors.
Here's an example that hopefully will illustrate what I mean:
The directive:
angular.module('my.module')
.directive('customElement', function() {
return {
restrict: 'E',
scope: {
isSpecial: '='
},
template: '<div class="custom-element" ng-class="{\'custom-element--special\': isSpecial"></div>'
};
});
The CSS:
.custom-element {
background-color: white;
}
.custom-element--special {
background-color: red;
}
.custom-element--special + .custom-element--special { // this won't work without replace: true
background-color: blue;
}
If I use replace: true everything works as expected (but then it comes with its own headaches).
If I don't use replace, the classes are not applied to the root custom element so the child selector doesn't work.
I could always add classes to the element in the postLink function, but that makes the template much less clear.
Does anyone have any experience using BEM with angular and using classes instead of tag names in your custom directives? What did you do to solve this problem?
i known it's a problem having replace:false for readability purpose.
The actual problem is that we need our OOCSS but you are handling Angular Components with custom tags has CSS Objects, and is not the case.
There is no practical solution for this, i won't recommend you to start adding classes on postLink function.
However what we are use to do is treat the custom tag as is own CSS Object besides the inner object structure. Forcing us to implement an extra CSS class for the custom tag.
block-context
block-context__element
custom-element
Why doing this when block-context__element is a redundant' class?
Because the rest of your BEM structure is the one you will maintain, the custom-element block should have meaning by it self and the block-context__element element is no expected to, you should abstract the CSS Objects from the directive's implementation, if you in some point start changing your html components your classes should still apply.
I hope this answer helps you

Is it error-prone to use ID-attribute selectors (not #id) on body elements to namespace CSS files?

I'm using Sass to compile my SCSS stylesheets into a single assembled.css to reduce HTTP requests. To namespace individual pages for styling, I wrap each page-specific CSS file in an ID selector for that page's <body> element - for example:
body#support {
.introduction {
#extend %dropcap;
}
}
In nanoc (using ERB), I have a helper that assigns each page's body a dash-separated unique ID based on the HTML folder structure, so the root pages will be #support or #products, while their sub-pages would have an ID like `#products-giantspacelaser'.
I want to make a set of SCSS rules that only apply to these 'products' sub-pages (not including the root-level #products page itself). Is there anything I should look out for regarding specificity if I use an attribute selector instead of an ID for this, as follows?
body[id^="products-"] {
.introduction {
#extend %dropcap;
}
}
I really don't want to use !important, but I do want to ensure that these page-specific rules take precedent over styles set in the '_base.scss' partial that precedes them in the #import order. Seeing as I have full control over the HTML structure, I could also theoretically use Erb in the Sass files to substitute in a comma-separated list of IDs like so:
body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {
.introduction {
#extend %dropcap;
}
}
- but that seems quite inelegant. Thanks in advance.
EDIT:
I've written my other styles in a really cascade-reliant way:
Normalise CSS
HTML5 Boilerplate's & my own sensible house rules
CSS Libraries (in this case Bourbon & Neat)
A "_source.scss" which in turn imports its own mixins & placeholder selectors.
A "_base.scss" which styles the default layout framework of every page.
A series of .scss files for each page's individual content styling - and, I hoped, overrides of base.scss layout decisions when necessary (if the page needs to take a serious departure from the norm).
Either way, these individual page stylesheets would need to definitely have a higher specificity than earlier defaults, as they were written for a specific purpose & page.
I'm intentionally not using any ID selectors except for this one specific purpose - namespaceing page stylesheets.
Using, say
.services .sharktraining .introduction .disarmingJoke {} --0,0,4,0
in "_base.scss" would surpass
body[id^="products-"] .disarmingJoke {} --0,0,2,1
in a further-down-the-cascade "products.scss", wouldn't it? (N.B. I know needing to use four classes is awful practice, I just don't want to worry about something slipping through the namespace).
I suppose there's another - really dirty - option: to repeat the body[id^="products-"] selector many times, to simply outnumber even the most specific class-strength rule.
It's going to have to depend on how you've written your other styles and whether or not they should take precedence (see: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).
If you match the selector exactly but prefix one of them with your body selector, the prefixed one will be specific enough to take precedence no matter what (even if the order was reversed):
body[id^="products-"] .widget {
color: green;
}
.widget {
color: red;
}
The .widget will be green because the first selector is more specific than the second.
The only problem with using attribute selectors over ids is if you care about IE6. If that's a concern for you, the IE7 JS library by Dean Edwards can help you out: http://code.google.com/p/ie7-js/
If changing how the page information is attached to the body element is an option, my recommendation would be to have the parent directory be an id and the child pages be classes:
<body id="products" class="giantspacelaser" />
This way you can retain the specificity of the id:
// excludes the body#products page, which wouldn't have a class set at all
body[class]#products {
// styling here
}

How can I apply CSS style changes just for one page?

I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.

Resources