I know that css if for styling looks of buttons etc... but what about when I position elements? Each page has different element positions/elements. Does it make sense to create an id for each element on every page and position in main css file?
When designing a page it is very important to separate the content (e.g. HTML) from the style (e.g. CSS). A well-structured webpage should be able to be read out loud and still make sense.
In this context, the position of the elements should be defined in relevance to other elements and not to the whole page. These elements can also be assigned to a class (e.g. <div class="announcement">).
This gives you a lot of power, since you can define a different behavior not only for the class (or id) but also for the class in respect to the parent classes. Take these scenarios for example:
Scenario 1:
<div class="post-content">
<div class="announcement">
Some text
</div>
</div>
Scenario 2:
<div class="special-content">
<div class="announcement">
Some text
</div>
</div>
The main css rule for the "announcement" can be the same. But you can have a special rule for the "announcement" that is inside a "special-content" area. So, you can just add another rule for the properties that should be different. Not only position, but anything:
.announcement {
color: red;
}
.post-content .announcement {
padding-left: 5px;
}
.special-content .announcement {
padding-left: 20px;
}
Of course you can build similar relations with classes, ids or standard elements. Read more about selectors in the MDN.
Related
I've a web app with a bunch of pages. Each page have a few of modal windows.
Such page with modals have structure as below:
<div class='page1'>
<p>Page 1 content here</p>
<div class='modal'><p>Modal window</p>
</div>
The question is how to separate css styles of modals and pages, i.e. to make page style not affect modal style.
For example, a style p { font-weight: 900 } will affect both page and modal paragraphs.
To clarify: the question is not about how to write css selector which narrows selector by div.page + p,
its question how to organize HTML for widgets as modals, which are contextually bound to certain elements/pages/components.
A simplest solution would be to put all those modals outside of the page components, but that would reduce readability because it would become not clear to which context modal belongs.
Whilst you could define a bunch of styling to remove every possible style that could have been set within the page to clear it ready for your widget, this isn't a very good approach if you have control over this code structure.
A much better approach would be to use CSS semantically and define a set of class names that apply to your page styling and not use the generic tag selectors unless you actually want every tag in your markup to use that style.
p { somestyles: here; }
Should mean every p has to do obey this, regardless of where it comes from, widgets and all. If you want ps within my content to obey my style then write
.mycontent > p { somestyles: here; }
and have the markup be
<div class="page1 mycontent">
<p>Page 1 content here</p>
<div class="modal"><p>Modal window</p>
</div>
Say what you really mean and the CSS will flow more naturally.
Edit
An iframe will stop the cascade, but you're completely removing the widget from the markup then (to a different file), which it sounded like you didn't want.
To me, modals are separate to the markup that calls them and can be placed elsewhere, you could include a comment where it is opened if a developer needs to know that information. One modal could legitimately be re-used by many elements on the page.
As for stopping containers affecting their contents, that's what they're for in the land of CSS, but if you really want to work around it then you can create a "reset" class that sets all of the style properties back to the way they were before you applied your styles. There's not a way to just turn off cascading though.
Use .modal p { font-weight: 900 } or .modal > p { font-weight: 900 } for modal elements!
Use .modal before each element of modal that will not create confusion!
For more details learn css selectors its fun CSS Selectors
I have some simple html
<div>row1</div>
<div>row2</div>
<div>row3</div>
<div>
<div>row4.1</div>
<div>
<div>row4.2.1</div>
<div>row4.2.2</div>
</div>
<div>row4.3</div>
<div>row4.4</div>
</div>
<div>row5</div>
and css file
div:nth-child(even)
{
background-color:green;
}
I want to make all odd rows green and to not take care of hierarchy. But in result I have this
What am I doing wrong? how to make green rows 2, 4.1, 4.2.2 and 4.4. All other shoud be white.
Is it possible without javascript by css only?
Basically, no it is not possible. CSS doesn't work by counting the elements in the document. It treats the document as a tree and you can't treat it any other way.
Your options are to remove the nesting (which ruins the semantics), to style the individual elements (with a class, say, perhaps dynamically generated) or to use Javascript.
One other thing you could do to make it make sense is to add this:
div {
background-color: white;
}
This is better but still not quite what you want.
Unfortunately, what you're describing is strictly not possible with CSS selectors.
The :nth-child selector (like :nth-of-type) only operates within the context of a single isolated group of children (not descendants). And indeed, that is exactly what you're seeing: the even children of each parent being highlighted. As you've written that selector, it will match rows 2, 4 (i.e. the parent of all rows 4.x), 4.2 (i.e. the parent of all rows 4.2.x), and 4.4, because they are each even-indexed children of their parents.
I'm afraid your options are (as I see it):
Flattening the DOM so that all of the rows are children of the same parent element. I suspect this might not be possible in your application.
Manually specifying whether a row is highlighted using JS and some sort of .highlighted CSS class. Not hard, but also kinda annoying to keep up to date if rows are added/removed/moved. Can be easily accomplished in jQuery by adding a .row CSS class to each row and using $('.row:even').addClass('highlighted');. See this jsfiddle. The jQuery-less method is more verbose but also quite simple.
Creating a vertically-repeating background image (or set of evenly-spaced divs) for the line highlights. If you know the height of each line beforehand, you can simply create a 1px-wide image with twice the height of the row. Highlight the bottom half of the image and set the background image to repeat. On the one hand, this can be done entirely in CSS (especially with inline base64-encoded images). On the other hand, it can't handle variable-height rows.
Alternative Solution for this is to using a class, provided your html structure is not a large.
<div>row1</div>
<div class="green">row2</div>
<div>row3</div>
<div>
<div class="green">row4.1</div>
<div>
<div>row4.2.1</div>
<div class="green">row4.2.2</div>
</div>
<div>row4.3</div>
<div class="green">row4.4</div>
</div>
<div>row5</div>
<style>
div.green
{
background-color:green;
}
div {
background-color: white;
}
</style>
Which is the right way to style different elements in a document:
Class:
<style>
.red {
color: red;
}
</style>
<h1 class="red">Hello, world!</h1>
<p class="red">This is some text.</p>
HTML tags:
<style>
h1,
p {
color: red;
}
</style>
<h1>Hello, world!</h1>
<p>This is some text.</p>
I'd say it depends. If the "red" class has a styling that is repeated many times across the site I would use the .red class (although that is not a good name for a class as it describes the aspect of the element, what happens if the graphic designer decides that the red elements are now green? your class won't make sense anymore)
This ultimately depends on what you feel more comfortable with.
Usually I would recommend using classes to style your content. This is because you will probably end up using HTML tags like p, div and the like all over your website for different purposes. And you will probably also want them to look different depending on where they are used for what purpose. While it is possible to define rules that will give you the desired behavior, it is not really easy to do so and a nightmare to maintain. Think of rules that look like this:
div p div div p h1 a { font-family:sans-serif; }
Nobody knows what is going on there. This would be much easier if you had just assigned classes to the elements that make up your document. For example:
.maincontent .quotebox .caption { font-family:sans-serif; }
It is up to you how much you want to drill down with those classes. You can either just assign a class to a top level element (like div) and then define rules for child elements or you can add a class to each element and then define rules for nested classes.
What you should do is think about what sort of CSS structure you would like to have. I like to think of different classes in terms of what I want elements to convey (in terms of information) rather than what I want them to look like. Making red a class name is somewhat beside the point as this does not tell you anything about the element that it is applied to. Also you might want to color it green at some point and then there would be elements of class red that are actually styled green. Better class names would IMHO be navigation or maincontent or infobox.
I think style using class is better than style using html tags.
class have more privilage than html tags while providing style. if we use both the style provided in class taken.
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.
I was at w3schools.com learning html and their code examples included the word "class" such as <div class="page"> . They didn't explain it so i needed you guys to. So please define what class in <div class="page"> means.
A class is a non-unique identifier for HTML elements. It can be used in a variety of ways:
1. For styling of those elements with CSS.
To apply a group of CSS properties as a pack to all elements of the class.
.page
{
border: solid 1px #009900;
padding: 5px;
color: #000077;
}
You can apply it like this:
<div class="page">
<ul class="page">
Ans so on.
You can also restrict it to only be valid for a specific element type, for example, only for divs:
div.page
{
/* ... */
}
2. For accessing these elements with JavaScript.
To perform some manipulations with all elements of the class. Like this:
$('.advancedOption').attr("disabled", true);
3. For some internal operations in browser. Beyond the scope of this question.
A class is best thought of as a 'category' or 'type'. This is best demonstrated with an example.
Let's say you have an HTML page that will have a table of products. In that table, you will have the products name, description, etc. Now, suppose you wanted ALL the products name to be styled a specific way.
<p class='product-standard'>This is a product name</p>
Then with your CSS you can do something like this:
p.product-standard { color:gray; }
So now, all tags with the class 'product-standard' will be gray.
Now, if you want certain sale items to be red, you can do this:
<p class='product-sale'>Sale item</p>
and
p.product-sale {color:red}
Classes allow you have consistent styling across many html tags.
The attribute class refers to a CSS class.
For example, in HTML:
<div class="page">
will refer to the CSS code:
div.page {
some css properties
}
MSDN is the best place to look for -
CLASS Attribute - Basically its a string or attribute that specifies or receives the class or css style rule.
It's just a space-separated list of words you associate with the element that can be used to select it for styling or with a script. A class by itself doesn't do anything — it's like a tag on a blog post.
If you're familiar with the idea of a class in programming, it has nothing to do with that.
A class in html is an attribute you can add to any html element (like paragraphs, links). You can make up the name yourself (has to start with a letter though), and then stylesheets or javascript can do something with that specific element.
For instance:
<p>This is a paragraph with no class</p>
<p class="foo">This paragraph has a class named "foo"</p>
<span class="foo">This span has a class as well
Now if you apply CSS to style your html, you can use:
p { color: blue }
p.foo { color: red }
span.foo { color: green }
.foo { font-size: big }
This way all paragraphs have blue text, except the paragraph with the class 'foo'. The rule p.foo effects only paragraphs with the class foo. The rule span.foo applies only to span elements with the class foo, so that part will have green text. Then finally, the .foo rule applies to all elements with the 'foo' class, so the last two elements will have big-sized text.
You can also have multiple classes. <div class="foo bar"> has the classes foo and bar. You can access those separately in the CSS by using .foo or .bar
i know it is a very old question but i hope my answer helps any newbie who comes here searching for a simplified answer.
in brief,
you may consider the class as a set of names for the element.
those names you may use any of them to call the element anytime on the same page.
it can be used to select the element to style it, change it, add some behavior for it, and/or remove it.
example:
<div class="sara"></div>
this sara element can be selected in css like the following ex:
<style>
.sara{color:red}
</style>
or in javascript like the following ex:
<script>
document.querySelector('.sara').remove()
</script>
I hope this simplified answer helps