How can i apply css stylesheet to single specific element?
There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference
Best way to achieve what you want is to use classss. See classes
.red { color: red;}.blue { color: blue;}
<label class="blue"> I'm blue</label><label class="red"> I'm red</label>
CSS - Style specific to single Element
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div
that contains both #columnleft
and #columncenter
, and has a class of .hide-left
or .show-left
:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left
or .show-left
classes on the parent container.
What I did here is similar to adding .disappear
and .maximize
styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
How to keep css style for only one element
The way you have written your css, you need to set the css id
to your node and not a styleclass
in your controller.
Background
A node can have both
- styleclass (represented by
.styleclass {...}
) - css id (represented by
#id {...}
)
From the JavaDocs:
The Node class contains id, styleClass, and style variables that are
used in styling this node from CSS. The id and styleClass variables
are used in CSS style sheets to identify nodes to which styles should
be applied. The style variable contains style properties and values
that are applied directly to this node.
Difference
getStyleClass().add("mainList")
sets the styleClass
of a node and is used in the css file by declaring :
.mainList {
...
}
For declaring an id to a node (lets taking your example), you should use :
listView.setId("mainList");
You use the id as you have already used in the css file:
#mainlist{
...
}
A
styleclass
normally targets a set of same type of nodes where as
css id
targets a particular node (but it is not mandatory)
Note : Do not confuse id
and fx:id
. Both are used for differently and have different implementations. For more information, click me!
How do you add css only for 1 element
If you use it for only one, then use id
with #
, for multiple elements you use class
with .
#only-this {
color: red;
}
<a id="only-this" href="yeet">Buy!</a>
<a href="yeet">Sell!</a>
Override css styles for a single element
It should be corrected as below,
<ul>
<li style="list-style: disc !important">...</li>
<li style="list-style: disc !important">...</li>
<li style="list-style: disc !important">...</li>
</ul>
- !important is a part of the CSS rule. So it should be placed before
";" - list-style should applied to the li element, not to ul
Apply styles to only to one element
Put that <div>
into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe
, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Apply CSS Style on all elements except with a SPECIFIC ID
Use the :not selector:
div:not(#bar){ color:red;}
<div>foo</div><div id="bar">bar</div>
Reset/remove CSS styles for element only
The CSS3 keyword initial
sets the CSS3 property to the initial value as defined in the spec. The initial
keyword has broad browser support except for the IE and Opera Mini families.
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
/* basic modern patch */
#reset-this-root {
all: initial;
* {
all: unset;
}
}
- Relevent github repo with a december 2017 more exaustive list
- Related
- Related from MDN
- Related W3C specs
As mentioned in a comment by @user566245 :
this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.
JAVASCRIPT ?
Nobody thought about other than css to reset css? Yes?
There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310
getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:
answered Feb 9 '13 at 20:15 by VisioN
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.
For comparison, here is Firefox 40.0 values list for a<blockquote style="all: unset;font-style: oblique">
where font-style: oblique
triggers DOM operation.
align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;
Related Topics
Can a CSS Selector Reference Another Selectors Property
How to Edit My Angular Project's CSS Files Directly from Chrome Devtools
How to Properly Handle Navbar Color Change on Scroll in Angular
Chrome Does Not Re-Calculate Width When Height Changes
CSS Re-Centering Elements on Wrap
Weird Issue with Chrome Inspect Element
Hide List with One Element with Pure CSS
How to Do Math Within a Less CSS String Interpolation
Background CSS 100% Width Horizontal Scroll Issue
Targeting Nth Column (Made by Column-Count)
Scale Image with CSS But Limit to Orignial Size
Add a Drop Shadow to Transparent Text with CSS
How to Customize The Editorfor CSS with Razor
CSS Selector for Only Two Classes and No Others
Bad Cursor in Select/Option, Ie
Add a Border to a Triangle Using Pure CSS
Plain <Select> Element Vs Bootstrap's Dropdown Element Rendered on Mobile Device