Is a CSS property starting with a hash (#) valid?
It is not valid. #width: 75%;
is a syntax error, since #
isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific id
s). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Somehow reference the hash value using CSS
You don't have access to the current page's URL in a stylesheet.
The furthest you could go is with CSS3's :target
selector on an element that you can apply content styles to (definitely not input
), and attr(id)
to get the value of the ID if its ID is the same as the URL hash fragment. And a hardcoded string representing the page URL (it might work in an internal stylesheet with <style>
tags...):
/*
If the hash is #save, select [id="save"]
and make its ::after content 'http://example.com/?' followed by its ID.
*/
:target::after { content: 'http://example.com/?' attr(id); }
You cannot use the attr()
function to get the ID of one element and put it in another, by the way, which is why I said you can't use it on input
elements.
In CSS what is the difference between . and # when declaring a set of styles?
Yes, they are different...
#
is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:
#foo {}
will style the single element declared with an attributeid="foo"
.foo {}
will style all elements with an attributeclass="foo"
(you can have multiple classes assigned to an element too, just separate them with spaces, e.g.class="foo bar"
)
Typical uses
Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.
Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {}
which would only apply to <h1 class="error">
Specificity
Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflict on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box">
any rules for #sidebar
with override conflicting rules for .box
Learn more about CSS selectors
See Selectutorial for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.
EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive link instead.
CSS - # sign before property
Update
It turns out that #property
is for IE7 or less, quoting from Paul Irish:
Update 2009.11.10 – Added #prop: value IE<=7 hack. I prefer it much
less to *prop.
Putting #
before properties must be a hack for some browser. Other similar hacks include _
(for IE6 and below), *
(for IE8 and below), etc.
For more info, see:
- Browser-Specific CSS Hacks
How can I load the attributes of a CSS class in a stylesheet directly into a hash using JavaScript or jQuery?
Two options for you:
1) The Stylesheet
object
...discussed here and here. That gives you direct access to the class definition, from which you can read the style properties directly and apply them to your DOM element.
Sadly, I don't have time to dash off an example right now, but the links above have them. Basically, you loop through the stylesheets (document.styleSheets
) and for each stylesheet, loop through the cssRules
(rules
on some browsers). Each rule has a selectorText
telling you what its selector looks like (".foo" or whatever). When you find the rule with the selector matching your class, you can loop through the properties on its style
property using for (name in rule.style)
, with the value being rule.style[name]
inside the loop.
2) getComputedStyle
:
Do as you said and apply the class to an off-page element, then use the getComputedStyle
(MDC, MSDN) function to get the style
object for its computed style. Be careful, though, as the computed style may have items that are inherited (e.g., from styles applied to all children of body
or even html
).
Hash sign in front of property name - CSS browser hack?
Theorically is a hack for IE7:
But here you have a comprehensive list of browser which fails or pass that hack. IE is not in the list (neither in the list which pass or fails), but add other browsers to the fail list.
CSS attribute-value selector doesn't work if value contains hash # sign
Use quotes:
div[data-demo='#does_work'] {
color: green;
}
DEMO
Why it has to be quoted? Because #
has special meaning in CSS. Quoting it hides that special meaning. The same effect could be approached using "
: [data-demo="#does_work"]
or by escaping #
with \
: [data-demo=\#does_work]
css property not appyling for div
First off your code quality is very bad. See. Please use a tool fix your issues.
Related Topics
Right to Left Support for Twitter Bootstrap 3
Perspective and Translatez Moves Diagonally
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
CSS Class and Id with the Same Name
Two CSS Files Defining Same Class
CSS List Item Width/Height Does Not Work
Is Vertical Text-Overflow Possible with CSS3
Where Do the Lost Pixels Go in a Percent CSS Layout
Flexbox VS Tables, Why Do We Need Flexbox
:Last-Child Pseudo-Class Mixed with Attribute Selector Not Working
How to Flip Background Image Using CSS
How to Make a CSS Grid with Dynamic Number of Rows or Columns
Width and Height Doesn't Seem to Work on :Before Pseudo-Element
CSS Selector for Selecting an Element That Comes Before Another Element
Immediate Child Selector in Less