I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:
<div class="someClass" myAttributeDirective></div>
The myAttributeDirective has it's own css page that defines some styling, like this:
[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}
/* then some more class stylings related to the directive */
So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.
When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.
BUT
I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).
So, how do I override that specific property, without changing the core css file?
If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.
<div class="someClass" myAttributeDirective style="position:absolute;"></div>
Related
Usually when I create a custom element I wrap it in a section or other appropriate HTML element and style that, but this leads the DOM looking like custom-element > section.
My question is, is it wrong to remove the section and simply treat custom-element as the root element and style that?
For example I have a custom element called tabs, right now when it's used the DOM ends up looking like tabs > div.tabs but I'd prefer to remove the div.tabs element if there's nothing wrong with that.
So my question is is it "wrong" to style my custom elements and treat them as any other HTML element, or should I continue to ignore my custom elements completely (even though it's hard to do so when you use > and other selectors)?
There is absolutely nothing wrong with styling custom elements. To reassure you, custom elements are valid HTML and unless you're supporting an older browser less than Internet Explorer 9, then you'll need to do some extra work to get the browser to recognise them.
I style custom elements all of the time, I even style Aurelia's <router-view> custom element as well.
It's better...
Don't forget that the default CSS display for a custom element is inline.
So if you want to use border, width... you should explicitly set display (to inline-block for example):
custom-element {
background: lightgreen;
width: 60px;
border: 1px solid blue;
}
.ok {
display: inline-block;
}
<custom-element>This is
<div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
<div>fine</div>
</custom-element>
I have a <p:panel> with id X and i want to remove the padding from its content X_content the generated HTML for the panel content is:
<div id="X_content" class="ui-panel-content ui-widget-content"> and the element appears in chrome developer tools to to have a padding:
padding:0.5em 1em;
i made an embedded style sheet to override the one in primefaces as follows:
<h:head>
<style>
.ui-panel-content, .ui-widget-content{
padding:0px;
}
</style>
</h:head>
but i didn't work, the padding still exists, could anyone help me?
Your CSS selector
.ui-panel-content, .ui-widget-content {
...
}
basically means: "Select all elements having ui-panel-content or ui-widget-content class".
However, the padding is definied in PrimeFaces default CSS by this CSS selector
.ui-panel .ui-panel-content {
...
}
which basically means "Select all elements having ui-panel-content class which is a child of an element having ui-panel class" which is according CSS cascade rules a stronger selector. This has thus higher precedence than your CSS selector. This is regardless of the declaration order of your style class (the declaration order only matters when the selectors have an equal strength).
When overriding PrimeFaces default CSS, you should provide a selector of at least the same strength or a stronger one. In your particular case, just use the very same selector if you intend to apply the style globally:
.ui-panel .ui-panel-content {
padding: 0;
}
Please note that when using <style> in <h:head>, then it would still be overridden by PrimeFaces default CSS, because it's auto-included in end of head. Rather move the <style> to <h:body>, or, better, put it in its own CSS file which you include by <h:houtputStylesheet> inside <h:body>.
See also:
How do I override default PrimeFaces CSS with custom styles?
CSS selector syntax
I have the website using bootstrap for its css style.
What if I want to take just a little bit of part of css from other website?
What would be the best way? I tried to use one of the function 'inspection' with Firefox.
It shows all the hierarchy and its styles stated for each class.
The thing I really care about is confliction between bootstrap and the new css.
How would you guys solve this if you want to take just a little bit part of other css?
First of all don't pick up styles from other's website before a prior permission from the site administrator...
For the bootstrap..I've never used it but still according to me you can over-ride the default bootstrap styles by using CSS !important
I tried to use one of the function 'inspection' with Firefox. It shows
all the hierarchy and its styles stated for each class.
Styling a single element is never dependent on a single class, it inherits some of the properties from the parent class too...For example
<style>
.wrapper {
color: #ff0000;
}
.hello {
background-color: #aaaaaa;
/ *Width and color of the parent div is inherited */
}
</style>
<div class="wrapper">
<div class="hello">Hello World</div> <!-- So actually this uses color and width of .wrapper and background-color of .hello -->
</div>
I'm using dojo 1.8 and don't want any padding in my bordercontainer / contentpane layout. The problem is, it seems when I add the claro css file, instead of just applying class styles, the div's i'm using for my content panes get styles applied inline. It almost seems like this is being done programmatically, but only when I add the css file.
For instance, the contentpane I use as my header looks like this:
<div data-dojo-props="region: 'top'"
data-dojo-type="dijit/layout/ContentPane"
id="header"
class="dijitContentPane dijitBorderContainer-child
dijitBorderContainer-dijitContentPane
dijitBorderContainerPane dijitAlignTop"
title="" role="group" widgetid="header"
style="left: 5px; top: 5px; position: absolute; width: 1387px;">
It adds the style="left: 5px; top: 5px...." which I'm pretty sure precludes me from just overriding any type of padding or margin setting with css. I want my content panes to not have any padding or "virtual" padding by using absolute positions like this. How can I still use claro but prevent this behavior?
The 5px comes because you have gutters set to true on the BorderContainer.
Add gutters: false to properties of the BorderContainer.
The dijit.layout widgets performs a resize when rendering, calculating the space it has to work with, and setting itself up as according to whichever layout variant it is (BorderLayout child in your case, which is referred to as 'nested containers'). Hence the inline styling, done programatically.
Your problem is most likely, that the CSS you apply yourself has a lower 'weight' then the styling from claro.css.
Check this link: specificity. This is a term, that covers which selector is highest prioriy. The more specific a css-rule is, the higher the priority.
So you need to 'win' over a class-on-class rule like this:
.claro .dijitContentPane {}
To achieve it, add #id selector - or nodetype-selector or similar. You can also put a prefix, such as 'body' to be general or '#innerContentsWrapper' for a localized rule
.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }
Another thing that will work is setting the following attribute on your div:baseClass="dijitContentPaneNoPadding"
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}