Hope you can help me with this CSS trick.
Basically what I need is this kind of CSS
if 'container' has sibling 'mySibling' {
#myDiv{
}
}
if 'container' has no sibling {
#myDiv{
}
}
For this HTML
<div id="mySibling"></div>
<div id="container">
<div id="myDiv"></div>
</div>
sibling sometimes will not be present, and I need different css for myDiv in these cases
Any help would be appreciated, I tried doing + and ~ selectors but I don't think I have proper logic.
You can do something like this:
#mySibling + #container #myDiv {
background-color:blue;
}
Here is a fiddle showing it off: http://jsfiddle.net/Lzq3S/
Note, I've changed the ids to classes in the fiddle just to show the two sets of div elements, but you get the idea...
This breaks down to myDiv that is a child of container that is a sibling of mySibling.
First off, make sure your html is correct; in your example, you forgot to specify whether you're using an id or a class! Possible options for your html:
<div id="container">
<div class="mySibling"></div>
<div class="myDiv"></div>
</div>
or
<div id="container">
<div id="mySibling"></div>
<div id="myDiv"></div>
</div>
For the sake of your example, we'll use id's, even though some would say it's better practice to use classes
Now for the CSS.
The + and ~ selectors operate in slightly different ways. The + selects adjacent siblings, while the ~ selects all siblings. Because CSS doesn't handle logic quite the same way as actual programming languages, you can't check to see if a container holds a certain element before applying styles, but you can use the sibling selectors to style elements that are next to certain other elements.
My suggestion:
.container #myDiv {
/* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
/* Your styles for #myDiv it is next to #mySibling.
Will override the styles a */
}
You can check out an example here: http://jsfiddle.net/8r2TZ/. Note, I specified "myDiv" as a class, because I used it more than once, and my CSS reflects that.
If you do need to have a CSS rule for each case without relying on overriding, it's still possible, since there's a selector for elements with no siblings:
#mySibling + #container > #myDiv {
}
#container:only-child > #myDiv {
}
(You can even achieve compatibility with old IEs by using :first-child in lieu of :only-child since #mySibling comes first.)
Related
Given the following HTML, I want to be able to apply CSS to the .first element where .second exists. I understand :has isn't available at the moment, and ideally I don't want to use JavaScript.
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
The CSS for :has I'd assume would be below. Is there any other CSS I can apply to make this work without the usage of :has.
.container > .first:has(+ .second) {
// styles here
}
If .second doesn't exist, then no CSS style should apply.
In your simple example you could work with :not(), like
.container > .first:not(:only-child) {
// styles
}
For more complex scenarios you may need a little more creativity, but hope this gives you an idea.
I have the following structure:
<div id="wrapper">
<div></div>
<div></div>
<div itemprop="description"></div>
</div>
<div itemprop="description"></div>
<div></div>
<div></div>
How to select only the first div with itemprops=description?
Or how to select the 3rd div inside #wrapper div?
If you can, add a class to the element you wish to target, e.g.:
<div id="wrapper">
<div></div>
<div></div>
<div class="{{target-class}}" itemprop="description"></div>
<div itemprop="description"></div>
<div></div>
</div>
Then use your "target" class name to select the relevant element. Its much cleaner and will cover you in the case of changes to the DOM.
I wouldn't advice targeting an element using nth-child unless you are targeting an element exclusively because it is the nth element.
An alternative would be to target the element by targeting all elements after it, e.g.
[itemprop="description"] {
/* targeted */
}
[itemprop="description"] ~ [itemprop="description"] {
/* not targeted */
}
You can see an example of that working here
For this specific case:
#wrapper > div:nth-child(3)
Though if the markup is likely to change, a better option would be to use a class or id, if possible.
Here are your options with CSS alone using some advanced selectors.
option 1
As there is currently only 1 itemprop div within the #wrapper, just select the div using the itemprop attribute - working fiddle
#wrapper div[itemprop="description"] { // your style }
option 2
This will select the last child element provided it's a div
#wrapper div:last-of-type { // your style }
option 3
As others have pointed out you can use :nth-child() selector. I wouldn't recommend this if the number of divs within #wrapper will vary though.
#wrapper div:nth-child(3) {
// your style
}
option 4
If you're going to have multiple itemprop divs inside the wrapper you can cancel out styling by selecting siblings. However, this will only work on the itemprop divs within the #wrapper.
#wrapper div[itemprop="description"] { // your style }
#wrapper div[itemprop="description"] ~ div[itemprop="description"] { // cancel out styling }
I am making a theme for a website, but I ran into a problem. I can't change their HTML or use javascript, only CSS.
This is what the site's HTML looks like:
<div class="container">
<div style="margin:a ridiculously massive number">
<p id="title"> Title of page </p>
<p> Words that cannot be read because of the ridiculous margin </p>
</div>
<div id="otherContent"> There a lot of divs without ridiculous margin all with different ids </div>
</div>
I want to remove the ridculous margin without affecting the other divs margins. Is this possible?
yes you can target the div that is the first-child inside of .container as to not effect other divs.
.container div:first-child{
//code
}
EXAMPLE 1
Example 1 is specifically for the example you posted where the div you would like to target is the first child of it's parent. Also note if the margin is inline like your example you're going to have to over-ride it with !important like so:
.container div:first-child{
margin: 0 !important;
}
OR
You could also use the :not selector if the other's have a similar class
.container div:not(.classname) {
//code
}
EXAMPLE 2
The point of example 2 is if your div isn't the first child and the only without a class (it would probably be unlikely you would have multiple divs with the same classname except one but it's possible). in your example you could also use :not() to target that other div with id #otherContent like so:
.container div:not(#otherContent) {
//code
}
OR
The last option you can use if the others don't apply would be nth-of-type() to target specifically which one you want to effect:
.container div:nth-of-type(2) {
//code
}
EXAMPLE 3
In this case you will have to use first-child selector with !important keyword, as this is the only way to make rule more specific than style="margin" rule:
.container > div:first-child {
margin: 0 !important;
}
If all the other divs have ID you can use the following:
div>div:not([id]) {
margin: 0 !important;
}
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I want to prevent this CSS selector from being applied to all elements in the page:
input {
color:red;
}
This will make the text red for <input>s of every type, but I want to exclude one input from this without changing the selector or style of this CSS rule. The element should have the default style (how it is when you have no css on the page).
You can use the not selector. Since an input field should have a name, you could exclude it by using:
input:not([name="exludeme"]) { }
This method won't work in IE8 and earlier versions. To support ie7 and ie8 too, you could use the attribute selector. In this case you have to reset the field:
input[name="exludeme"] { /*add all your reset styles here*/ }
add an id for the different one and apply it just for him, and to make sure that no other css will overwrite the css you choose use !important
html:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="diff"></div>
css:
div.box {
background-color:red;
width:50px;
height:50px;
position: relative;
}
#diff{
background-color:black !important ;
}
check this: http://jsfiddle.net/y32Wv/
note: !important is optional, depends on the selector position inside the file, but in cases where it might be overwrite by other css rule (for example if someone change the order of the css rules) it will stop working right, and !important will prevent it from happening.