I'm trying to make a very basic HTML/CSS/JS widget, but I'm having some problems with the CSS layer. It seems that I can't write selectors that work, and it's becoming very aggravating. In particular, I'm trying to override the font-size setting inherited from the body css selector for the widget. My HTML (actually, it's Hamlet) is:
<div class="container">
<div id="flashcard-container">
<div class="span6 offset3 well flashcard">
<div class="front">
<p class="flashcard">This is the front of the card.
and my CSS file says:
.flashcard p {
font-size: 24px;
}
div .back {
display: none;
}
Actually, I have a problem with both selectors. In particular, the first one just does not work to match the xml structure. The second one seems sub-optimal. Why should I need to specify that I'm talking about a div at all? I just want to quantify over backs, whatever tag they are.
I realize this is extremely basic, but I think that between this and some Chrome bugs with 3d transitions, I got myself extremely confused. It has been many years since I've dealt with the front-end. :(
If you wish to target a node with a class attached, the syntax is
elementname.classname {...}
(although OOCSS fanatics will suggest just using .classname and making your CSS structurally agnostic).
I am not sure what you mean by 'quantifying over backs', but if you simply want to target an element with a 'back' class, you can target it as so:
.back {...}
Though it might be best to contain the styles as 'back' is a rather generic class name:
.flashcard .back {...}
Try this:
p.flashcard { ... }
div.back { ... }
Actually I can't see a div with back class in your code.
You may as well use just .flashcard and .back. Specifying div or p just narrow the choice. If you specify .flashcard it will be applied both to, say, or .
But if you write
.flashcard p { ... }
It means that you chose all descendants of .flashcard, like:
<div class="flashcard">
<p>...</p>
</div>
Related
Well I'm watching videos about oop css with bem. I didn't understand one thing. I have a media object and I use it everywhere like in navbar and content and footer etc. So how shall I change the media object and insiders. I guess 3 ways there are.
1 - I can catch inside other blocks grandchild chooser
it will like ".navbar .media".
This way makes me worrying because of grandchildren is making slow and complicated I think. Don't think about only .media. I have to select media-item etc etc...
2 - I can give another class to .media like .navbar together
it will like ".navbar.media".
This way need more classes to html so it makes me thinking.
3 - I guess there is no third option if there is please let me know :) Which way I shall do.
Thank you already.
You should add an extra class, navbar__media (that's a double underscore for descendant), and add that to the media elements inside of the navbar.
A rule of BEM/OOP CSS is that an element should always have their style defined by the classes they have, and not based on where they are in the DOM.
For reference: http://getbem.com/naming/
Example:
<div class="navbar">
<div class="media navbar__media"></div>
</div>
<div class="media"></div>
With this css:
.navbar {
background: #00f;
}
.media {
background: #f00;
}
.navbar__media {
background: #0f0;
}
So, due to two sets of messy procedural code colliding in horrible Lovecraftian horror that I can't do much about, I am forced to deal with a situation where I'm going to have two seperate CSS class declarations on the same objects. For example, I might have an end result that looks like...
<div class="my_class" class="cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>
I know having multiple declarations like this is bad, but there's not anything I can really do about it at present. However, I can control the content of one of those classes, and potentially the order they appear in...
Given this, what effects will the order have on the classes showing/not-showing? Will one overwrite the the other? Will it error out and I'm effectively left with no class? Will they combine as if both were in the same declaration? Or with it simply destroy Dunwich and everything I hold dear?
Edit: Looking into it deeper, it looks like the div will completely refuse to display, but I"m trying to find some way around that if possible.
The two class attributes on the same element will break. The second class will be ignored, see below.
The only alternative is to add an inline style unless you can clean up the code in the first instance.
.my_class {
color: blue;
}
.alt_class {
color: red;
}
<div class="my_class" class="alt_class">
...something goes here, or so I have been told...
</div>
Using duplicate attribute class for one element is invalid in HTML.
This is valid when you need to use multiple classes:
<div class="firstClass secondClass"></div>
The order does not matter, the classes will be targeted equally from HTML but depends on CSS order.
For example:
.secondClass{background: salmon}
.firstClass{background: skyblue}
firstClass will override secondClass because it's set after secondClass
Why don't you use just like this:
<div class="my_class second_class third_class">
...something goes here, or so I have been told...
</div>
Isn't this working for you?! or you're trying to achieve something else?!
Why don't you just use
<style>
.parent_class{
margin:10px;
}
.parent_class.child_class{
margin:20px;
background:red;
}
</style>
<div class="parent_class child_class">
...something goes here, or so I have been told...
</div>
first of all, you need to put all the classes in one 'class' attribute separated by a single space, otherwise the browser will only take the first one, aka:
<div class="my_class cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>
To answer your second question, whichever one comes later in the stylesheet, will overwrite any rule that also exists with the first class, aka:
.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
color: blue;
}
The color would be blue. If they were ordered the other way around, the color would be red. If any of the rules contains '!important' it would take precedence.
Also, if there are different rules within the classes, they won't conflict and will all apply, aka:
.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
font-size: 36px;
}
The color would be red and the font-size would be 36px.
It is actually common and not problematic to declare more than one class for a single object; as jQuery is often used to add/remove classes based on different events.
I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?
for example,
.center {align: center};
.content { include .center here};
I came across css framework - Blueprint. We need to put the position information into HTML, e.g.
<div class="span-4"><div class="span-24 last">
As such, we will place the positioning attribute inside html, instead of css. If we change the layout, we need to change html, instead of css.
That's the reason I ask this question. If I can include .span-4 into my own css, i won't have to specify it in my html tag.
Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:
.center, .content { align: center; }
.content { /* ... */ }
Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:
div.center, div.content { align: center; }
div.content { /* ... */ }
I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.
In standard CSS, it's not possible to do this, though it would be nice.
For something like that you'd need to use SASS or similar, which "compiles" to CSS.
This is where the Cascading in Cascading Style Sheets comes in to play.
Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.
.baseModule {align: center;}
Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).
.message {border: 1px solid #555;}
Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.
.error {background-color: red;}
So now you have a few css definitions that can be reused with ease.
<!-- Regular message module -->
<p class="baseModule message">
I am a regular message.
</p>
<!-- Error message module -->
<p class="baseModule message error">
I am an error message. My background color is red.
</p>
To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!
In designing the HTML and CSS for a page, when should I use
img.className
versus
.className
versus
#idName
or some other variant?
Are there guidelines or recommendations?
Summary from answers
Thank you to all answerers - there is some excellent stuff here!
make CSS as specific as possible
use an OO approach
order: #id, tag, tag.className, .className
when to use each selector, also class/ID comparison
give selectors names based on purpose, not what they look like
use advanced selectors for smaller code, leave CSS classes for exceptions/overrides only
manage ASP.NET munging ID
In general you should be as specific as the item demands.
There is no general rule, it depends on the style in question.
A lot of people will recommend you keep to the lowest specificity with the theory that this allows the maximum cascading reuse but this is absolutely toxic in real world situations where you have multiple developers all working on slightly different versions of what a .foo might look like. Pollution from inheritance you did not want leads to massive bloat in trying to undo that locally or time-loss in refactoring.
The best guideline I always offer is to try and think of CSS in OO terms: class selectors map to interfaces more or less, tags map to classes, and ID selectors map to instances. Consequently decide if the style you want to apply really applies to that thing, all things like it, or anything which wants it.
I also strongly encourage you to make use of high level IDs on wrapper elements so you can write selectors in a namespace like fashion (i.e. #foo .bar, #foo .baz where #foo is unique to a page or set of page designs) which allows you both a level of specificity which reduces cross-design pollution and a level of generality which lets you make the most of cascading CSS reuse.
Best of both worlds.
It depends on the intended semantics, and, as others said, be as specific as possible.
#idName for unique elements on the page. Good examples are #header and #footer
TAGNAME for general purpose page styling.
TAG.classname and .classname for exceptions/overrides to the above rules.
And don't forget the use of advanced selectors. A bad example:
<style>
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
.in_the_menu { color: #800; font-size: 150%; }
</style>
<h1>Hello World!</h1>
<div id="mainMenu">
<h1 class="in_the_menu">My Menu</h1>
</div>
The same could have been achieved with:
<style>
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
#mainMenu H1 { color: #800; font-size: 150%; }
</style>
<h1>Hello World!</h1>
<div id="mainMenu">
<h1>My Menu</h1>
</div>
The second example gets rid of the superflous "class" attribute on the H1 element in the "mainMenu" div. This has two important benefits:
The HTML code is smaller and cleaner
You are less likely to forget to add the class attribute
If you take good care of you CSS, and make use of proper advanced selectors, you can nearly completely leave out CSS classes. And keep them only for exceptions/overrides.
Take this example which draws boxes with headers:
#content H2{
border: 1px solid #008789;
padding: 0em 1em;
margin: 0.2em 0em;
margin-bottom: 1em;
font-size: 100%;
background: #cccb79
}
#content H2 + DIV{
margin-top: -1em;
border-left: 1px solid #008789;
border-right: 1px solid #008789;
border-bottom: 1px solid #008789;
margin-bottom: 1em;
}
Now, as soon as you follow a H2 with a DIV in the #content element, you have a nice box. other DIVs and H2s are left alone:
<div id="content">
<h2>Hello Box!</h2>
<div>Some text</div>
<div>Some more text</div>
<div>Some more text</div>
<h2>And another title</h2>
</div>
If you get these rules right, you hardly ever need classes, and can work with IDs and TAG names alone. And as an added bonus, your HTML will be a lot nicer to read and maintain.
You preference should be, in order from highest to lowest:
id
tag
tag.className
.className
ID selectors are fast. Tag selectors are reasonably fast. Pure class selectors are slow because the browser essentially has to interrogate every element and see if each has that class. Getting elements by ID or tag name are "native" operations from a browser's context.
Also, I find it good practice to make your CSS selectors as restrictive as possible otherwise it just turns into a mess and you end up getting all sorts of unintended consequences where CSS rules apply where you didn't otherwise expect, which often forces you to create a similar yet different selector just so none of the rules regarding the first don't apply (translating into more mess).
Basically if you know if you only use a class on div elements then do this
div.className
not
.className
If you apply a class to several elements just list them:
h1.selected, h2.selected, h3.selected
instead of
.selected
In practice I find very few situations where you need to use "naked" class selectors or where it is advisable to do so.
you should use the selector best describing your rules
id: when you want to select one single element
.classname: when you want to style elements regardless of their tag
tag.classname: when you want to style only tags with the given class
tag tag tag: when you want to style all subelements of a tag
Class selectors
.className
This is to be used when you have more than one element on the page that you would like to apply the same style to. It can be to any tag element. So in the following all will use the same style as set out by the .className.
<p class="className"></p>
<img src="/path/to/image.png" class="className" />
But you can also restrict it like so:
img.className
By placing the tag along with the style definition, you're saying that this style is only to be used when it's the class used by that particular tag, in this case, an image.
HTML code will look like this:
<img src="/path/to/image.png" class="className" />
If you have other elements on the page using the same class style, but are not of the same tag, then the styles set out in this will not be applied and they will take on the more generic version as mentioned in the first example.
So repeating the example above:
<p class="className"></p>
<img src="/path/to/image.png" class="className" />
Only the image will take on the style as set out by img.className whereas all the rest will take on the style rules set in .className.
ID selectors
#idName
This is to be used when there is only one instance of a particular element that you wish to apply the style to.
You can also force it to apply only in certain tag conditions as you have earlier with the class definitions.
p#idName
This example will only apply to the paragraph block marked with the ID:
<p id="idName">
If you were to put that id on another element, like this:
<div id="idName"></div>
Then it will not take on the style set out and be ignored.
As to your two first selectors, the first of the two will overwrite the second, as it's more specific. You can calculate the specificity of a selector.
One thing worth noting is that some server side scripting technologies (most notably ASP.NET) don't play well with using IDs for your styling. If there is a chance your design will be used with such a technology, I recommend forgetting about #id selectors and use tag.className instead.
The reason is that ASP.NET actually changes the ID that ends up in the HTML based on a number of criteria, if the tag is output by a server side control.
I know this is a pretty old question but for all those who are reading this just now...
There are 4 categories of rules in general:
ID Rules, Class Rules, Tag Rules, Universal Rules.
And it's important to mention that class selectors are faster than tag selectors. So you should always use them in the following order
1. ID Selector
2. Class Selector
3. Tag Selector
4. Universal Selectors
In your case you should never use the tag name before class name.
You can find more information here: Writing efficient CSS
It really depends on the situation:
.error{
color:red;
}
p.error{
background-color:yellow;
}
div.error{
background-color:grey;
}
Always use the cascading effect of CSS to your advantage.
It's good practise to use the least specific rules you can for each rule.
How you structure your CSS will depend on the particular needs of the design.
Yes. You may want to use the same classname for two elements in the future. Be explicit and clear. This will also prevent class-rules from overlapping onto unintended elements.
h1.title { font-size:18px; } /* My h1's are big */
p.title { font-size:16px; } /* My p's are smaller */
.title { color:#336699; } /* All titles are blue */
Use ID's only when necessary, and only once per page.
When to use what depends on what you want to select. img.className (type selector + class selector) selects only IMG elements that’s in the class “className” while .className (just class selector) selects any element that’s in that class and #idName (id selector) any element with the ID “idName”.
But besides that, the selector all have a differente specificity that affects the order in which the properties of that rules overwrite the one of others.
So if you have an IMG element with the ID “idName” that’s in the class “className”:
<img src="…" id="idName" class="className">
The properties of the rules would be applied in the following order (specificity from highest to lowest):
#idName
img.className
.className
But when you use a specific class only for one specific type of elements (e.g. “className” only for IMG element), you can go with only .className.
i am creating a website where i read in html data from other websites.
The problem is that the source that i am reading all has <p> tags in it, but i actually want to format them differently
is there a way to have some <p> tags using one formatting and some <p> tags do other formatting in the same web page?
Wrap the imported content with something like this:
<div class='imported'>
<p>Imported content here...</p>
<p>These paragraph tags were imported...</p>
</div>
and style it like this:
div.imported p {
/* My style for imported <p>s */
}
Edit In answer to the comment about styling your own <p>s, you can style all the <p>s on the page with a standard rule like this:
p {
/* Style for all <p>s */
}
and then the more specific rule for imported <p>s will override that one.
Edit: In answer to the comment about inline styles, you could override them with !important but that will have a knock-on effect on people with user style sheets. I don't believe there's a clean CSS-only solution to that - you might end up having to parse the imported HTML after all.
Yes, if the tags have different CSS classes, e.g.
HTML
<p class="foo-site">This is some content lifted from Foo Site.</p>
<p class="bar-site">This is some content lifted from Bar Site.</p>
CSS
p.foo {
/* Style for Foo Site text */
}
p.bar {
/* Style for Bar Site text */
}
<div class="includedContent">
<p>a paragraph</p>
</div>
<p>Another paragraph</p>
with
p { font-size: 8pt; }
div.includedContent p { font-size: 10pt; }
Yes, you can probably give them specificity like so
p:first-child { /* note this won't work in ie6 */
border: 1px solid red;
}
p.main {
background: pink;
}
If you don't have access to change the HTML, and REALLY needed to add classes (to get it to work in IE6), you could use jQuery (keep in mind users without JS won't see any of your classes added this way)
$('#content p:last').addClass('last');
There has to be something in the markup to differentiate the paragraphs from each other.
One group might all be a member of a given class, or might all be descendants of an element with a particular id, or some other condition.
You have to look at your markup, see if there are any rules that can describe the group of paragraphs that is different, and change the markup so such a rule can be written if there aren't.
Selectutorial will help you learn about the types of rules you can use.
Since you say you are importing HTML from other websites (I hope you are being careful, it sounds like you risk letting them insert harmful code into your pages), you should be able to wrap the imported code in an element (a div would probably be best) that you can give a class or an id and use a descendent selector with.
You could use jQuery to add css to all even and odd <p>s like this:
$("p:even").css("background-color", "#bbbbff");
$("p:odd").css("background-color", "#aaaaff");