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
Related
This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.
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.
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
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
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')