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.
Related
So, I was looking at a tut on youtube the other day, and this guy kept defining css rules with classes really weirdly, and I wondered if one of u guys could explain the necessity of it: here is the code:
ul.class li{
color:#fff
}
Why can't he just do:
.class{
color:#fff
}
Thank you for reading my question, I hope you understand what I am asking for.
Video: https://youtu.be/2wCpkOk2uCg
P.S - Sorry for the giganticly large title 😏
When you put the element before the class, CSS only applies the styles to the members of that class that are of that specific element.
For example, if you had .class applied to 3 headers and 3 paragraphs, writing p.class would only affect the paragraphs.
With ul.class you're saying "Apply this styles to all the ul's with this class. If you only use .class you're saying "Apply this styles to ANYTHING that has this class". It's very different. :)
I can think of at least two reasons to include the element name as well as the class:
Specificity, i.e., which CSS rule takes effect on a target element when multiple rules apply to to it. There is a specificity algorithm that determines which rule is applied when multiple rules are in competition. This awesome Specificity Calculator is a great tool to help you understand the algorithm. So, in short, including the element name and the class gives it additional weight.
Documentation in your CSS. I tend to include the element as well as the class, e.g. h1.customer-name, to self-document what type of element the rule is being applied to. When I see .customer-name without the element name, I am not totally confident in what type of HTML element it is. Doing this means I don't have to keep the HTML structure in my head or consult the HTML repeatedly while I work on CSS. But this is pretty dependent on one's approach to CSS as well as the tools used, so I'm not sure I would consider it a good idea across the board.
And one more, but not least important thing. If you adding the tag name before the class name (such as span.class{}), so you got more specific rule and it's have bigger priority (no matter in which order that rules writter in css file). For example, if you write two rules:
.class { color: red }
and
span.class { color: blue }
you will get a blue text as a result.
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 6 years ago.
I tend to apply my own custom CSS documents to certain sites, since I prefer dark backgrounds with light text as opposed to the vice-versa standard, and very few sites have a "dark mode" or otherwise cater to that preference, this site itself being an excellent example.
However, I was recently stricken by something odd - an entire HTML document nested inside of another one. (I now understand this is achieved via use of an <iframe> and so it's nearly impossible to style without JS or something) I can only apply the custom stylesheet to the parent document, though.
So, long story short, I'm wondering what sort of selectors I would have to use to target elements of the nested document only - for example, selecting the <body> of the nested document. Would I refer to a body in a html in a !DOCTYPE that is also in a body? What about recursively nested documents?
Whether this nesting thing is poor practice or not does not immediately concern me -- there seems to be a valid use case for it and, regardless, I'm not building the site. What I DO care about is how to add styles to it externally.
Assuming you literally have a document that has been 'injected' into another document, you would simply target it with the expected identifiers:
To target elements unique to the sub-document:
body body [element] {
}
To target elements that exist within both documents, you would just use the standard:
[element] {
}
The above would apply the style to any desired element that is contained within either document.
Please be aware that you cannot style an iframe inside a document with CSS -- you'd either have to find a way to manipulate the iframe's CSS itself, or use JavaScript to target the desired elements with document.getElementById().
Hope this helps! :)
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>
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 8 years ago.
Lately I'm working with a lot of Wordpress themes. When I have to edit a particular element, I usually use Firebug to see the element's name so I can change the CSS. I think I understand the difference between IDs and Classes, Classes are used for a group of elements that you want to share the same styling, and ID is usually used for a single element.
Here's the thing, I'm seeing so many elements in these Wordpress themes that are only used once, but they are assigned to a class. A good example is the website logo. Isn't the logo only used once? Shouldn't it be assigned to an ID? Why is it always assigned to a class?
Needs change often. An element/style that today you think will only be used once may be used multiple times in the future. Maybe you will have your logo more than one time on your site (for example, on your about us page). Perhaps you may eventually incorporate a second search bar. There are very few cases where you know with 100% certainty that the style will only be needed once.
Here's a good read on the subject: http://oli.jp/2011/ids/
http://ryanfait.com/articles/the-difference-between-ids-and-classes/
Ryan says
"I take a different stance than most web designers when it comes to
using ID's and classes. The vast majority of CSS coders use ID's for
any elements that are simply used once on a page. However, I only use
classes to style my websites, but, when I want to use an element in
JavaScript, I use an identifier. From a presentational standpoint,
styling elements with classes looks exactly the same as styling them
with ID's, but the flexibility of classes offers a certain appeal even
if I don't plan on using a class more than once on a page. Also, when
I see an ID in my XHTML, it reminds me that there is some JavaScript
that refers to that element. It's up to you, but so long as you
implement classes and ID's properly, it is more or less a matter of
personal choice when to utilize one or the other."
id is a unique one, but when class its not, you can you one for many selectors
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects
on a page should be done with a class. Take for example a page with multiple "widgets":
There are some reasons why people prefer using classes instead of id's in CSS. (note that for javascript ID's are still commonly used).
The class element is re-usable on that page. This means that you won't have as much duplicated code with Classes as you would have with ID's.
Usually, IDs refer to something very specific, and abstracting would be tough
Any performance gains picked up by using id, is negated by adding any other selector to the left fo that id. Which mainly means that in most uses of id's you won't really have performance gains. (you could even have less performance than if you would just use a class)
Lecture about this:
http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/
http://www.impressivewebs.com/css-specificity-irrelevant/
http://www.baldurbjarnason.com/notes/ids-in-css/
If you're new to web development, just use the simple rule:
If you're trying to apply style to a HTML element, use a class.
If you're trying to interact with a HTML element with javascript, use an ID.
You see more of classes because they can be reused and assigned to multiple elements.
However an id can belong to only one element at a time hence less of them.
Classes only appearing once:
Such cases like the one you identified, you may call them semantically incorrect as id is more appropriate choice for that but still it would work and it probably happens couple of times that we get to use class which only appearing once (may be while defining that class we are thinking that we can use it somewhere also but at the end we really dont), beside general habit another reason could be:
That class styling is also used somewhere else along with another class for e.g.:
.logo{
width:250px;
height:250px;
float:left;
}
.logo class is applied to logo <div class='logo'>...</div> But there is another element which also require same three properties of logo and some other also so one can reuse logo there also.
<div class='otherstyle logo'>...</div> this would apply the style of logo as well as otherstyle to it.
In some other words to sum it up. The cardinality of a class is 1...* so you can use it one and more than one time. But for id it is 1...1 you will and only use it only once.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working with other developers and as much as possible, I want them to understand the HTML/CSS code I wrote when they take over a particular project.
So, I have this simple snippet.
<section>
<div class="twocolumn">
<div>
<p>Hello</p>
Press
</div>
<div>
<p>Nice one!</p>
Click
</div>
</div>
</section>
To target inner elements in this code, which is better practice, to use selectors that begin from the outermost element (section) so that another developer will understand the "arrangement" of the elements as such:
section > div div:nth-child(1) p + a {
...
}
or should I make use of the classes like this:
.twocolumn a {
...
}
Which do you think is easier to read (for other developers)? What are the pros and cons for each process? Can you give other examples?
First off, your selectors don't tally. .twocolumn a by itself will match both a elements since you didn't specify to look only in div:nth-child(1).
That aside. Remember that the sole purpose of combinators in CSS selectors is to establish relationships between two or more elements in markup. So a sibling combinator says "this element must be a sibling following that one", a descendant combinator says "this element must be contained within that one", and a child combinator says "this element is a child of that one". If you do not need to enforce a specific relationship between two element (typically this comes from assumptions you make about the structure of your page), then you probably do not need to specify that many elements in your selector.
Taking your snippet for example: if you can guarantee that every inner div within that structure has a p followed by an a, you can leave out the p +. You only need it if a can appear elsewhere and you want to make sure you only target a if it directly follows p.
Next, if you can guarantee somehow that every section > div will have the class .twocolumn, then you can just use the class selector. I find that really unlikely given what the class name is supposed to describe, but assuming that it is the case, then if you want to select the first a only you will need div:nth-child(1) at least:
.twocolumn div:nth-child(1) a {
...
}
I can't offer much more general advice because it really depends on your requirements and what you are working with. But I will say that you should keep a balance, i.e. don't rely completely on the structure of your markup, use classes and IDs to point to key elements where possible. As mentioned in another answer, you want to avoid tightly coupling your CSS and your HTML causing you to have to change your selectors to reflect any potential changes in the HTML structure.
But do still account for a small set of possible variations in the structure, like with the p + a example I mentioned above, so you don't end up overusing classes and bloating your markup unnecessarily. Web applications are so dynamic these days, and CSS provides a reasonably potent syntax for you to use, so don't be afraid to use it and to educate others about how it works.
Short answer: never.
Well not never exactly. The more complex your selectors are then the more coupled your CSS code is with your HTML. Change the HTML and then you must reflect the changes in your CSS selector code. Back and forth for each change means more manual work to ensure your design isn't broken.
Ideally you want to use as many CSS classes as you can with no more than one level of child selectors. Best to use the > operator to target direct children rather than relying on the ancestor selectors.
This is my opinion obviously, but I have been developing websites for over 10 years. A good philosophy to follow (where I learned most of this from) is from SMACSS.
Keep in mind that it isn't always about markup. There's a break-even point between clean markup and sane CSS code. I've just found that by using multiple CSS classes then you have the maximum about of reusability.
As general best practice, less specific selectors are better. In this case, you probably wouldn't want to target EVERY <a> tag inside your .twocolumn div. A more specific selector would most likely be best, depending on what you're actually trying to do. If possible, you should add a class to the <a> tag and target .twocolumn a.classname.
The more specific selector the faster it will be handled.
In this case:
section > div {}
style resolver will look on the element and its immediate parent. That is O(1) computationally complex task.
But this one
section div {}
in worst case will have O(d) complexity, where d is a depth of DOM tree.