Let us look at below HTML chunk,
Here, in the above chunk, we are using class for each div.
We can also replace classes with CSS selectors
.first{
/* some styles */
}
.first:nth-child(1){
/* some styles */
}
.first div:nth-child(1){
/* some styles */
}
The above CSS chunk can also satisfies our requirement
What is the best practice? Explain the conditions where we can use selectors and classes
thanks :)
I think it's better to use CSS selectors style when the style is related to the position of elements and otherwise use classes.
For example, if a table's background of each line is related to their position, say, red for the first line, green for the second line, blue for the third line, red for the fourth line, and green for the sixth line and so on. It's better to use CSS selectors like :nth-child(3n+1) in this case so that you don't need to write the extra information like class='red' in HTML which is a bad practice since it's hard to change if you want to use four colors later.
But if the background of the table lines are decided by their values, say, red for values less than 0, green for values greater than 0, and blue for 0. You may find it quite hard to express this in CSS selectors so adding class='lz0' may be a wise thing to do.
In conclusion, bear it in mind that content and style should be decoupled. Use HTML for content and structure and use CSS for style.
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.
I'm writing a simple contenteditable-based HTML editor, one which lets the user edit a page that is styled by their own CSS (which they can live-edit) and also do basic things like insert new tags, apply classes, etc.
One feature I'd like to have is an option to toggle the display of dotted borders around divs, much like you typically find in WYSIWYG HTML editors such as Dreamweaver, Expression Web, and many others. (This helps the user see her divs even when they have no visible border.)
Is there any possible way to do this? Some ideas:
I can't simply modify the CSS on the actual/existing divs, since they may already have their own borders defined, which I should not obliterate with dots. Ideally, I can show a border around the existing borders, which is how things appear in the aforementioned commercial editors. Even if I fall back to actually setting borders on elements that have no existing borders, figuring out which ones have no borders may be difficult, esp. in the face of things like :hover which dynamically change the computed style.
I may wrap these divs inside new divs, which in turn have the dotted border. The tricky part is handling their CSS, e.g.:
Wrappers must be similarly styled as their children, e.g. a div that has width:50px must have a wrapper that's also width:50px (roughly), so I'd either need to continually poll (as there's no way to be notified of indirect style changes, e.g. on the class) for changes to the computed style (which is completely non-scalable), or implement my own CSS engine that runs and determines what has changed each time the user live-edits their CSS.
Polluting the DOM with my own divs is invasive and interferes with rules such as:
/* these may or may not be divs */
.a > .b > .c { ... }
or:
/* if this is wrapped, then they'll all be :first-child */
.foo:first-child { ... }
or perhaps:
/* immediate children of my wrappers would inherit the dotted borders */
.foo { border: inherit; }
Perhaps there's a way to automatically rewrite these rules robustly - to take the last example:
:not(.my-dotted-border) > .foo { border: inherit; }
But even if theoretically possible, there are a ton of cases to worry about and it would be quite hairy.
Lastly, perhaps there's a way to collapse margins even with the dotted border, but I don't know of it.
Another idea is to overlay the borders on top (absolutely positioned with JS based on the dimensions/offsets of the underlying elements), but this is ugly with overlapping elements that have particular z-indexes, and again I'd need to monitor all elements for style changes. Except now it's not enough just to monitor the changes in the explicitly specified styles, as I need to react to changes even to offset and dimensions (e.g. if the user types some text, it may push down all the elements below it, so I must react to that by updating the overlays).
A related question is See the page outlines but this is from the perspective of a user who wants to see outlines - I'm asking from the perspective of a web-based editor implementation, how to provide these outlines.
Thanks in advance for any tips.
You can use the outline and outline-offset CSS properties to style the outline of your editable divs as they will not overwrite any existing borders (they will however overwrite any existing outlines if there are any).
Check out this example to get an idea of how you can implement it: http://jsfiddle.net/EFJ6B/
I need to display a company name so that the "main" part of the name appears on one line and is huge and the secondary part of the name is centered below it and smaller. Since it's not a slogan or "subtitle", I feel like it should all be in the same h1 element and, ideally, be transformed through pure CSS (meaning no spans or ems if it can be avoided.
Example:
<h1>Big Bill's Custom Auto Parts</h1>
should appear as:
Big Bill's
Custom Auto Parts
Is there a pure CSS way of doing this (even a pseudo-class not fully supported yet)?
Not possible, it seems to make more sense that you have two different headers and can be styled accordingly.
How would you possibly specify where changes happen without adding a <span> within the <h1>?
Is it permissible to include a new line in the heading itself? If so you can use the first-line selector like this:
HTML
<h1>Foo bar
baz</h1>
CSS
h1 {
font-size:1em;
white-space:pre;
}
h1:first-line {
font-size:3em;
}
The shortest solution to this without using extra headers is the use of a span element:
<h1><span>Big Bill's</span> Custom Auto Parts</h1>
CSS:
h1.span {
/* styling rules */
}
If you're fine with breaking the line with a <br/>, then you might accomplish this using the ::first-line pseudo-element.
You said you want to do it in pure CSS way, separating content and presentation. No addtional spans, no br. I understand it, but if you think about your problem, you want to create presentation rule based on content. Is that making sense? Isn't that mixing content with presentation you want to avoid?
I tried other stuff in this thread, but this finally worked.
<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>
Hey all, simple question I'm sure, but I would like to have the body of a page be one color and to have the table in the center a separate color. I tried specifying body color and table color, but body always overrides it. I'm attempting this in css, and I have a feeling I need to use a "not" excluder to make this happen? Such as specifying body not:table or something along the lines of that. Absolute beginner here, so be easy on me. Thanks!
If you literally tried to apply body color and table color that'd be invalid. Both for (x)html and css.
color addresses the foreground (text) colour of an element, whereas background-color addresses its, well, background-colour. So:
body {background-color: #ffa; }
/* sets the background of the `body` element to #ffa (yellow) */
table {background-color: #f90; }
/* sets the background of the `table` element to #f90 (orange) */
I wouldn't suggest you ever use these colours together, but they're highly visible and leave no mistake about whether they're being applied, or not.
Most properties in css cascade down, some do not. But table {/* css */} is enough to cause the new values to override those set for a parent/ancestor element. Providing the new values are explicitly stated.
Apparently while there is a CSS3 not() selector (I had thought it was just a jQuery implementation, wow...), it would seem that it's implemented only in 'modern' browsers, so not widely useful at the moment. And it wouldn't really address your situation.
Make sure your styles are actually being applied to your table tag. If your table does not change colors, then your CSS selector is likely wrong.
Here is a simple example of styles being applied to the body tag. The class bg is added to the table tag in the markup, so it will pick up the other colors.
See here: http://jsfiddle.net/uEgrg/
look at this jsFIDDLE sample
i want to change the cell background color for hover state with CSS.. it can be attained through JavaScript but i want to do it with CSS... plus i want the whole cell to act as a link how to do it
There are several things you need to take into consideration:
Don't mix CSS and presentational HTML otherwise it will get very confusing. Colors (for text, background, borders), sizes, alignment, anything that has to do with the look of the site belong into the CSS.
Try to avoid tables for layout purposes. They may seem easier as a beginner, but it's an outdated technique.
In the CSS you need to move the :hover rule before :visited rule. Since both rules have the same specificity the first rule (currently :visited) with take preference and visited links will never have the hover rule applied to.
You don't need to repeat styles in CSS for every rule. Due to inheritance and cascading many styles are automatically applied to child elements.
You need to set the background colors on the links instead of the table cells, then you can change the background color on hover just as you already are with the text color.
Giving the links display: block will have the links stretch over the whole width of it's containing block, since that is the default behaviour of block elements.
Here is an example how the same layout with "clean" CSS and HTML should look like:
http://www.jsfiddle.net/QShRF/5/
Give the menu's table tag an id and then:
#menu-table td:hover { background: whatever; }
Really, though, you shouldn't be using tables for anything other than data tables, they are hard to maintain and break semantics.
.menu_links:link { display: block }
Makes the entire cell act as a link (you'll need to add a little margin/padding though). Then you can just add .menu_links:hover { background: #123123 } to colorize the background.
Also, I can advise you to set all the table's styles in a stylesheet. <table bordercolor="red" bgcolor="#ffffff"> is very outdated and makes maintenance on the site a hell.