I have a container with children:
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Sometimes I want to add another child (server-side) into the container and change the styling of the other children to make room for their new sibling. It would become:
<div id="container">
<div id="special"></div>
<div></div>
<div></div>
<div></div>
</div>
Can I achieve this purely in CSS? Are there fancy new selectors (CSS4?) that I can use?
I want to avoid JavaScript or changing the attributes (classes) of any of the elements. I did read about the lack of parent selectors in CSS but the articles I read are a couple of years old, so I suspect there might be some brand new selectors I can take advantage of.
#container #special {
float: left;
background: yellow;
}
#container div {
/* already float: none; by default */
background: white;
}
is the simplest way to style elements differently in CSS: all div are styled because of the second rule (whether or not the special element exists or not) and the first rule will apply to one special element if it exists, with more specificity than the first one. Both rules will apply so properties in the first rule should override those in the second rule.
Now if you want to style the other divs differently when the special element exists:
In your example, no div precedes the special one so you don't need a preceding sibling selector; using the general sibling selector is sufficient:
#container div {
padding: 5px;
}
#container #special ~ div {
padding: 10px;
}
Could the special element be also created in 2nd, 3rd, etc position?
Then a similar trick to selecting first half of the elements could be used (combination of :nth-child()/:nth-last-child(), but it has limitations, like an upper bound of elements to be set and it won't work with more elements than that - and the selector will be looooong and relatively inefficient. Will gzip really really well though :) )
No.
This won't ever be supported by CSS. Even with advanced selectors in CSS4, they are selectors. They select something that is in the DOM. They can't produce a new HTML element.
To do this in jQuery, just use the before() method
$("div.special").before("#container div:first")
I'm guessing you could try some sibling selectors along with not selectors... something like:
.special+div:not(.special){ /*some special style here*/ }
.special+div+div:not(.special){ /*some special style here*/ }
.special+div+div+div:not(.special){ /*some special style here*/ }
up to n divs...
.special+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div:not(.special){ /*some special style here*/ }
if you have access to scss you can do something like:
#for $i from 1 through X { //REPLACE X WITH A NUMBER
.special #for $j from 1 through $i {+div}:not(.special):{/*some special style here*/};
}
I'm just guessing about the scss formula, but it should be something like that :D
Also, depending on what you want to achieve there might be other options. Could you be more specific on the styles you want to apply?
Related
I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame
I am trying to change the font for the whole page in HTML. By whole I mean everything: buttons, forms, etc. Is there a way to do this in CSS?
html {
color: green;
}
This would make the text green, but not the text of buttons.
Well, there's universal selector:
* {
color: green;
}
Take note, though, that specificity of this selector is the lowest (MDN).
Wild card selector
* {
color: green;
}
It may be the case that you need to over ride inline CSS and javascript generated CSS. In this case use !important as well
* {
color: green !important;
}
Use the * universal CSS selector.
The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector.
The selector div * will match the following em elements:
"Universal" in the h1 element ( matches the <h1> )
"emphasize" in the p element ( matches the <p> )
"not” in the first li element (matches the <ul> or the <li>)
"type” in the second li element (matches the <ul> or the <li>)
Example:
This rule set will be applied to every element in a document:
* {
color: green;
}
Also to add, it's compatible with most browsers, although it can be buggy in Internet Explorer 5.5, 6.0, 7.0.
If you don't need to support IE < 8, and want something that's less smelly, set an explicit color only on html and force everything else to inherit the color. Colors are already inherited by default on most elements, but not all of them.
Since this means applying two different color declarations, you will need two separate rules:
html {
color: green;
}
body * {
color: inherit !important;
}
Honestly, you shouldn't rely on a wildcard selector for doing this. You should take advantage of CSS's native inheritance. The best thing to do would be to remove the specific color declarations from your stylesheet (as needed) and add the color to your body or html tag. Using a wildcard is similar to this, except you are declaring that every single element should have the CSS as apposed to the native inheritance.
Can any body tell me how I use last-child selector to style my last div of subs?
This is my HTML -
<div class="main">
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="paginate"></div>
</div>
I tried it something like this in my CSS -
div.main div.subs:last-child {
border: none;
}
But its not working. If I remove paginate div, then it is working. So can I know how can I style last subs div without any extra id or class declaration.
Thank you.
Assuming there is only ever 1 element succeeding your .subs (.paginate), you can use this:
div.main div:nth-last-child(2) {
border:none;
}
See this JSFiddle
This can be seen as a little hacky, and if your paginate element is ever absent, then the wrong sub element will be targeted. Your only other option is to give the .subs their own container and then use :last-child:
Another JSFiddle
P.S: To understand why :last-child isn't working the way you want it to, I really recommend also reading Spudley's answer.
The problem you have is because of :last-child doesn't work the way you think it does.
The :last-child selector will select an element only if it is the last child of its parent.
In the case of your .main element, the last child inside it is the .pagination div. This means that .main>*:last-child can only select the pagination div. It doesn't matter if you filter it down by specifying .subs; you can't select anything else using :last-child because none of the other elements are the last child of .main. If the actual last child element isn't in the filtered selection, it will select nothing rather than selecting something that isn't the last child.
The best way to work around this is to wrap your subs elements inside an additional layer of markup, so that the last one then does become the last child of that container element. Either that, or move the pagination element outside of the main element; whatever works best for your layout.
The other selector you might have tried, :last-of-type works in a similar way. For the time being, there isn't a CSS selector you can use instead to pick the last .subs element, using your current markup. (unless you're happy to go with :nth-last-child(2) which will pick the second-last child, on the assumption that the pagination div will always be present).
In the new selectors being designed for CSS4, there is a set of 'match' selectors that would do exactly what you want to do. You would use :nth-last-match(1) to get the last matching element. This is the selector you need. Unfortunately, it isn't available in current browsers, and there's no real hint yet as to when (or even whether) it will be available in the future. For the time being, you can read about it here, but not use it. You might be able to use it or something similar via a JS library like jQuery.
Hope that helps explain things to you.
I would suggest that you add an extra class name to the last element. http://jsfiddle.net/5FQck/
div.main div {
border: #000 thin solid;
}
div.main div.subs.last {
border: none;
}
<div class="main">
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs last">subs</div>
<div class="paginate">pagination</div>
</div>
None of the following selectors work in IE 8 and below, primarily because they are all CSS3 selectors.
:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)
You could also add that new class to the last element using JQuery: http://jsfiddle.net/5FQck/1/
$('div.main div.subs:last').addClass('last');
If I understand you correctly, I would do it like this.
.main .subs:nth-child(4)
{
border:none;
}
With this HTML code.
<div class="noote">
<p class="first admonition-title">Noote</p>
<p class="last">Let's noote.</p>
</div>
How can I set the color of Noote to be red with css?
I mean, how can I set something for (div class="noote") and (p class="first") under it with css?
Try this:
/*this will apply for the element with class first
inside the element with class noot */
.noote .first{
color:red;
}
/* If you wanted to apply a rule for both individually
you can do: */
.noote, .first{
border:1px solid red;
}
div.note{
...
}
Refers to the div element that has the class note.
p.first{
...
}
Refers to the p element that has the class first.
div.note p.first{
...
}
Refers to the p element inside note that has the class first.
In addition, if you want to set an element child without setting a class to it,
div.note p:first-child{
/* it refers to the first p that contains noote */
}
#amosrivera's got it.
It's worth nooting that descendant selectors require more CPU. I always use more specific rules where possible. So instead of
.noote .first{
backgorund:red;
}
You could say
.noote > .first{
backgorund:red;
}
A nominal difference in most cases, but still a good habit.
Really?
Descendant selectors are
inefficient... The less specific the
key, the greater the number of nodes
that need to be evaluated.
— Google "Let's make the web
faster" docs
And
Descendent selectors are a major slow
down to the Safari browser
— John Sykes, May 2008
Some performance tests show little impact, and most writers agree that it only makes a difference on very large documents.
But mainly, I'm just going with my programmer instinct — say what you mean, and no more.
In stylesheets you often see div#id { /* something */ } and div.class { /* ... */ } but how often do you see just div { /* something */ }?
Is it a bad idea to style div tags that have no #id or .class associated with them?
It's not necessarily bad practice, as long as you're sure you want to apply this styling to every single div in your document. You can always override and / or add further down the cascading style sheet.
It all depends on your purpose.
Styling all divs to be one specific style can be overridden.
So you may want to force height on all divs, but on divs with class hidden you want display none. Finally you may want a div with id = hello to have a red background.
Next you decide that you want a div with id=foo and class = bar to be have height:200.
div {
height:100px;
}
div.hidden {
display:none;
}
div#hello {
background-color:#FF0000;
}
div#id.bar {
height:200px;
}
Well...it depends on what you want. If you want every single div tag in your markup to have the same style then it makes sense to do a tag selector instead of a class or id selector.
As you normally use divs for a bunch of different stuff, I would answer "yes".