This question already has answers here:
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
(8 answers)
Closed 7 years ago.
Here's a strange one. This seems pretty simple but just isn't working.
Fiddle
I have images within a container. Images with class="1" should take up the full width of the container div. Images with class="2" should be able to fit 2 images side by side, taking up the full width of the container div. Images with class="3" should be able to fit 3... you get the idea.
However, even though the classes are being applied (inspect the elements!), the styles are not. The only thing that seems to work is a general style for #container img, which Iyou can test in the fiddle by removing the ".1" or ".2" from either style. As soon as you add .1, the images no longer take on the style, even if they are class="1"!
All I can think tis that maybe tags don't support the class attr? But I don't think that's true.
CSS class selectors cannot start with a number.
Use an attribute selector or (more sensibly) better class names.
The problem is that
In CSS, identifiers [...] cannot start with a digit.
That means that class selectors can start with a digit, but you must escape it properly.
To escape a digit d, you can use \00003d or \3d (note the whitespace).
For example,
.\31 {
background: #0f0;
}
<div class="1">Foo bar</div>
Related
This question already has answers here:
Get rid of spaces between spans
(6 answers)
Wrapping character "Y" in span, increases the margin to next character
(3 answers)
Closed 6 years ago.
<p>
<span>cancel</span><span>comfirm</span>
</p>
<hr>
<p>
<span>cancel</span>
<span>confirm</span>
</p>
hey should show me the same result. but in the second template, after rendering, there is 'space' between 'cancel' and 'confirm'.
tags are inline elements so the line break will no use.
i can float them both with CSS.
but, i don't know the reason. i just think block tags will have space.
ref img
Note: OP edited his question after it was answer, still, answer is
applicable, he just changed the order of DOM hence now his image is
correct.
I think your image is incorrect. It should be showing white space in the first p element and not the second one. As span is an inline element, it will result in whitespace being rendered by browsers when you have a line break between inline elements in your source.
You can hack that in several ways by putting those elements in a single line in your source code which you are already doing in your 2nd example, or you can use font-size: 0; on your parent element and re-set font-size for child elements, or you can put an empty comment like this.
Span is for a group of text that you'd like to apply a similar style to. Span by default has no style applied to it. Span is generally used for styling to specific part of data. Span is not rendered as anything or something on browser.
This question already has answers here:
What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?
(8 answers)
Differences between assigning attribute, style, and class in div
(3 answers)
Closed 7 years ago.
What is the difference between height="50" VS style="height:50px" ?
And height="50" VS style="height:50"?
I am always confused by this.
Presentation-related attributes such as height="50" where the original way to specify presentation details of HTML elements.
However, they have since been deprecated in favour of CSS, via the style, class and id attributes, which give a lot more flexibility that the original attributes (at the very least because CSS can be extended without touching the definition of HTML itself, but of course also because you get the "cascading" part, as well as multiple units, media-queries, and much more).
You should thus generally avoid such attributes in HTML.
The only exception is HTML in e-mail, as many clients support those attributes but not the CSS versions.
Note that you should generally avoid style attributes as well, in favour of separate CSS, and class and/or id attributes. This allows you to completely separate the HTML and CSS, and makes it easier to change the presentation of your page without touching the HTML (or the code that generates it).
Also, in CSS (and thus in style attributes), you must specify units (except for 0), so height: 50 is not valid, you should use height: 50px (or another unit).
Using style attribute you add rich CSS to the element. Some styling can not be added using HTML attributes. For example <div style="background-color: #ff00ff; float: right"> is impossible with plain HTML attributes.
This question already has answers here:
What's the difference between HTML's and CSS's width attribute?
(7 answers)
Closed 5 years ago.
Is there a difference between
<table width="100%">
and
<table style="width: 100%">
I know that the img need
<img width="20px">
to precalculate the space it will use. But how is it with tables?
The first option is the old HTML strategy of setting properties of a table.
It is deprecated because of concerns about adding "visualization" properties to your HTML code, which should focus on content markup.
The second option is the (new) CSS solution but, please, do not declare it "inline" but in a separate CSS file targeting the table element with a class or ID name, otherwise advantages are effectively null; CSS philosophy is based on separation between data and styles, so if you declare it "inline"... there is implicitly no separation.
1st example is HTML width tag, which nowadays is basically used on newsletters.
2nd example is CSS inline, not a good approach, unless you want to override some class style and you don't want to add more classes.
3rd example is like 1st example, and not necessary needs the unit measure , take a look: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img
This question already has answers here:
HTML class attribute with spaces, it is a W3C valid class?
(4 answers)
Closed 9 years ago.
If there is a simple google search for this question, I apologise now, but I'm unsure of which keywords I'm looking to use. I'm decent with CSS but I think I'm yet to utilise the full power of the language and also completely eradicate code redundancy.
I've come across this code (any similar snippets many other times):
<p class="comment smallertext center-align">
What CSS would this be referring to?
In terms of the comment, smallertext and center-align all being spaced.
Thank you in advance for any replies and guidance!
It means that element has all of the following classes: comment, smallertext and center-align. In HTML, spaces separate multiple class names in a single attribute.
In CSS, you can target this element using one or more of .comment, .smallertext or .center-align, either separately or together. Having three separate rules and a single element that has all three classes, all three rules will apply:
.comment {}
.smallertext {}
.center-align {}
You can also combine them together, if necessary, to apply styles specific to elements having all three classes:
.comment.smallertext.center-align {}
The code shown in the example links to 3 different css class selectors:
.comment {
}
.smallertext {
}
.center-align {
}
So instead of making lots of non-reusable css selectors, you split them up into lots of small ones that provide 1 functionality that will most likely be used for lots of different parts of your websites. In that example you have one for comments, one for smaller text and one for center aligning text.
It's a way of defining multiple classes to a single element. In this case it would match classes comment, smallertext and center-align.
Try this short explanation... Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element.
This question already has answers here:
Complex CSS selector for parent of active child [duplicate]
(10 answers)
Closed 9 years ago.
I'm trying to give a style to all <div> with children and not to those with no children.
Or, give style to all, and give a different style to those with no children.
The structure is similar to this
<div>
<div>
<div>
<div>Don't style me</div>
<div>Don't style me</div>
</div>
<div>Don't style me</div>
<div>Don't style me</div>
<div>
<div>
<div>Don't style me</div>
</div>
</div>
</div>
</div>
CSS level 4 is being worked on, and will include selectors that can do what you're asking.
When it does become available, the syntax will look like this:
.myclass! div { ... }
This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)
If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/
However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.
So what options do you have?
The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
$('.myclass:has(div)');
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.
It can be done in 2 ways :-
1) Giving a specific class to the parent div and the child div will inherit the style.
2) Giving class to divs individually.
The better option would be implementing via the 1st option.
Use the ">" operator.
Some documentation
Like div > div {}
http://jsfiddle.net/9tLXP/
div {
padding: 10px;
background: red;
}
div > div {
padding: 10px;
background: blue;
}
div > div > div {
padding: 10px;
background: orange;
}
div > div > div > div {
padding: 10px;
background: green;
}
Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.
If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.
Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.
Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.