In my html page, I have div with id footer. Inside of that are couple of other divs, and last one of them has p-tag inside. How do I apply css style for that p?
#footer div p {
background-color: #000;
}
#footer div {
float: left;
width: 23%;
border-left: solid 1px;
margin: 0;
padding-left: 5px;
}
The first one does not seem to overwrite the second, which works fine. Could someone give me hint where to find information especially about the order of css selectors?
You can use the :last-child selector to target the last div and its containing <p> tags.
footer div:last-child p{color:#f00;}
Here is an example fiddle - http://jsfiddle.net/vuGpt/
And here is some further reading - http://www.w3schools.com/cssref/css_selectors.asp
There's no real order to CSS selectors, except the order you create. The styles you define will be overridden if you select the same element later in your css. You just have to be aware of how you are selecting your elemnts. A general selector will be overridden by a more specific selector. For example if you defined the following
p{color:#0f0;}
Then this selector will be overridden by your more direct selector as defined above. To overcome this, you can add !important to your rules. That way you can be reasonably sure that that style will be applied regardless of it being overridden later. Unless you accidently use !important again. It can become a mess quite quickly and with well written CSS you chould be able to avoid using !important at all...
Your resulting CSS for the above would become:
footer div:last-child p{color:#f00 !important;}
Hope this helps...
Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:
<div id="footer">
<div></div>
<div>
<p>My paragraph</p>
</div>
</div>
I have tested this and all appears kosher. See fiddle.
Related
I have the following structure:
<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>
I'd like to apply some CSS only to .div1, considering that it's on the same level as (not a children or parent of) .div2.
EDIT: To bring some light in the issue: The first div is actually my website's logo and the second div is a navigation that MAY or MAY NOT exist depending on the page viewed. If the navigation is present, I need to display the logo in a different manner (resize it).
CSS works as a cascade then you can never refer to elements based on what is next to them, just possible refer elements based on what was there before them.
The subjects of a selector are always a subset of the elements matching the last simple selector
For this you may need the help of Jquery:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
Since the class of both the divs are different, you can apply some specific rules to div1 by using class selector .div1
.div1 {
/* div1 styles */
}
Ah, so you want to apply css to div1 if div2 exists? CSS can't do that. You need JS. jQuery for example:
$('.div2').parent().find('.div1')
you can then apply the css directly or add another class ('div2exists') and add your style in your css-file
Though there's a way doing this in CSS, I personally would not recommend that.
It will only work if we assume we have a fixed number of div elements inside some ".container" div. And this number is 6, 2nd is the logo (also it is 5th counting from the end), 5th is the navigation.
.container {}
.container .logo {}
.container .navigation {}
.container div:nth-child(2):not(:nth-last-child(5)).logo {
width: 100px;
height: 100px;
}
.container div:nth-child(2):nth-last-child(5).logo {
width: 200px;
height: 200px;
}
The first rule is for the logo with navigation
The second rule is for the logo without navigation
Again don't do this, CSS is not designed for that.
You basically want to select a sibling, you will find a detailed post in this link CSS Tricks - Child and Sibling Selectors
.div1 ~ .div2{
Do your stuff here
}
This chunk will only take place if .div1 exists in your markup, is that what you wanted?
Edit:
I've noticed that your desired selector precedes the other one, this code will only work if the desired selector in this case .div1 is after .div2 .. CSS doesn't have that you will have to use jQuery
Currently tweaking a theme and have tried searching for an answer to this question to this! I'm not stuck - but more just want to know the answer out of curiosity.
I understand that
"#" means an id and
"." means a class.
I've also been reading on this post about how you can add specificity to your html/css through combination of elements/ids/classes ie:
a.fancy { color: red; } /*an element that has an anchor and a class = red.*/
However the code I am working on has the following elements that I don't understand:
div.footer {background-color: {{ settings.footer_color }};
Why would you specify "div.footer" as both the div and the class when simply using a "." would suffice? In my mind there would be no point when the class ".footer" could be used without a div?
Hope you can help me work this one out!
div.footer means the element must both BE a <div> and HAVE the class footer.
.footer would trigger for any element with class footer; for example, a <span class="footer".
div.footer means you are targeting only <div> elements with the class .footer.
<div class="footer">This is targeted.</div>
<p class="footer">This isn't targeted, as it isn't a div with the class .footer.</p>
div .footer, however, would target all elements with the class .footer that are descendants from <div> elements.
<div><p class="footer">This is targeted.</p></div>
<section><p class="footer">But this isn't targeted.</p></section>
With the new implementation of html5 <footer> is a legitimate tag just like <div> or <p>. As confusing as it may be the period . before the footer declaration constrains it to a class name instead of the tag.
So in your case: div.footer = <div> with class name footer = <div class="footer>.
There are numerous reasons why you may make such a declaration.
Sample html
<div>
<div class="footer">Footer only</footer>
<div>Div only</div>
<footer>Footer tag; DIFFERENT</footer>
</div>
Example Css
div {
border: 1px solid red;
}
.footer {
background: blue;
color: #fff; /* white font color */
}
Depending on what you want to do, let's use the specific div.footer examples to show what we can do.back
Inheritance
By inheritance, div.footer will inherit "3 properties" -> background, color and border from the div and .footer declarations.
Now you may want to override some of these properties so...
Overriding Property
Use something like div.footer { color: red; } this will override the white color.
Layout Insight
The beauty of css is that you can use declaration to give you "insight" on what the html markup will be laid out as.
Omitting properties I would write the css as follows:
#footer {}
#footer ul {}
#footer ul li {}
#footer p {}
#footer p a {}
The html:
<div id="footer">
<ul>
<li>List 1</li>
<li>LIst 2</li>
</ul>
<p>Hello! Copyright website company name.</p>
</div>
You could then reverse engineer the html through just css because of the descendent character use. This maximizes the power of "cascading".
--
NOow I hope some of this has given you some insight. A few other pointers are this:
Typically a webpage has only one footer. When there is only one of something use the # id selector ALWAYS.
Use classes to not only apply styles to multiple elements but to also provide "meaning to your markup" -> go back to the principle of "layout insight" to understand what I mean.
div.footer should could more simply be .footer Now, it may be necessary to include div just to say "I only want to apply this class to divs only" and in that case go for it. But defining all your declarations with div.someClasName is not all that valuable.
DO NOT use names of tags as classnames. div.div is very confusing - especially if you are programming for a while. Therefore, since <footer> is now a legit tag you shouldn't apply it as a classname. On the other hand "#footer" could be argued differently because it can only exist once in a webpage.
It's about specificity. div.footer is more specific (a div with that particular class) than .footer (any element with that class).
As to when to use one or the other, it really depends on the markup and CSS you are building.
I came across html>body in one of the stylesheets and wanted to know as to why it is used.
html>body {
font-size: 16px;
font-size: 78.75%;
}
It's called a Child Selector.
The reason it's being used is likely because it's a hack to exclude IE6 and below. Those browsers don't understand the > selector.
More Information
the '>' means that it is referencing on child elements of the parent (in this case 'html')
so for example I could have an arrangement of divs that look like so
<div id="outermost">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
and i wrote some css like so
#outermost>.inner { background-color: #CCC; }
it would only apply the rules to the first level '#inner'
Obviously there is only one body tag however it used to be a hack to exclude ie6 and below to write different rules for ie7+ ;)
Child selector, more info here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
So in your code it would be any body child of html
'> symbol indicates child of
Above code means
The style applies to all the tag body which is a child of html
#sample>div
above applies to all divs which are children of the element with id sample
I have a bunch of elements that look like..
<div id="hi">
<div class="head">
</div>
<div class="footer">
</div>
</div>
..except some of them don't have the footer element, only a head. I want to give elements without a footer a bottom border. I'm hoping for something like..
#hi:hasno(.footer) {
border-bottom: 1px black dotted;
}
Is there a CSS selector I could use for this, or should I just use a JavaScript equivalent?
You can select elements that contain no other elements using the :empty selector, but what you need won't be available until CSS Selectors Level 4’s :has and :not(selector list) are both implemented in browsers. So no, it can't be done in pure CSS. Now whether or not you should use a JavaScript equivalent depends on what you really want to achieve here. If it's a minor detail, feel free to add it with JavaScript if it's not too much of a problem. If it's a huge, essential feature, consider restructuring so you don't need this kind of selector.
Depending on the situation with your background, you could put the border on #hi permanently, and then overlap that with your footer by giving the footer either margin-bottom: -1px or position: relative; bottom: -1px; and hiding the border when the footer is present.
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class
I have CSS like this
.div1 img {
// ...
}
.myimg {
// ...
}
and my HTML code is like this,
<div class="div1">
...
<img src="..." class="myimg"> // image html
...
</div>
The css formatting defined in .div1 img is obviously applied to the image html code. However, I actually don't want it happen. What can I do to not to have '.div1 img' effects on that image html code? I don't want to modify the content of div1 img or related html code because it is used in other places already (and it is a template code that I don't want to mess with).
P.S. I cannot remove or modify <div class="div1"> either because there is other template code around.
Thanks.
You have two options:
You can explicitly override all of the styling defined in .div1 img with what they should be in .myimg
You can write .div1 img:not(.myimg) for the first rule.
You could do:
.div1 img:not(.myimg) {
// ...
}
:not selector explained here
There is a nice little not selector that would work, but unfortunately it doesn't work in all browsers.
One sure way to do that is redefine all your .div1 styles in your child .mying class so it overrides the parent.
here is a little demo in jsfiddle: http://jsfiddle.net/u6MnN/1/
mess around with it and see what's best for you.
you need to neutralize all those stylings you are giving to ".div1 img" for example if you say "width:100px" there you need to say "width:auto" in the other one.
Although if you have lots of rules in the first set it would be very dirty this way and you need to change your layout.
If you have img tags inside a container div with class .div1 they will of course get the styling you define in .div1 img, but if you want lets say 2 images out of 8 in that div to have another style (which i believe is why you made class .myimg), you need to put !important after the defined stylings in .myimg like so:
.div1 img
{
height: 125px;
width: 125px;
}
.myimg
{
height: 150px !important;
width: 150px !important;
}
This is only if you are NOT using CSS 3.0