I'm modifying JQuery UI Accordion Menu, which currently has a structure as below:
<h3>Title</h3>
<div>Children</div>
<h3 class="no-children">Title</h3>
<div>Children</div>
<h3>Title</h3>
<div>Children</div> ...
As you can see, the middle title has no children, so what I want to do in CSS is something along the lines of selecting the div that occurs after the .no-children class and hide it. These are not nested so I can't do this the easy way.
I know I can display:none but I can't seem to select the correct element.
Is there a way to do this?
.nochildren+div{
/* Style goes here */
}
This selects a DIV that that is immediately preceded by a element with the the .nochildren class. This will only work if both elements are on the same level, many older browsers will have issues with it.
http://www.quirksmode.org/css/contents.html
If you are using jQuery there is an easy way of doing this Here
You could use
$('.no-children').next().hide();
or .nextUntil();
http://jsfiddle.net/lollero/DqpPd/1/
CSS way would be
.no-children + div { display: none; }
http://jsfiddle.net/lollero/DqpPd/ ( ie7+ )
Related
I have this element here:
#ihf-main-container .col-xs-6
I want to hide all the .col-xs-6 inside #ihf-main-container, except the .col-xs-6 element that has .ihf-for-sale-price inside of it....How would I accomplish this?
Like Phiter says, there's no css selector for this case yet. A parent selector will be available in CSS4.
For now, I would suggest to add an extra class to the .col-xs-6 element and hide them by that class.
Don't show them at all by the use of the serverside script you're using (nicest way I think)
Or use javascript (for the JS libary jQuery it can be something $(".ihf-for-sale-price").parent().hide(); )
I don't quite understand exactly but you could just name your last column as
<.... class="col-xs-6 newName" > in html
And then in css you could do
.col-xs-6{
display = none;
}
.newName{
display = block;
}
Hope this works but I feel I could help you better if you could add some pseudo code with the question.
I have some html that looks like this:
<div id="parent">
<div id="child"></div>
</div>
I want to apply a default background color to #parent except for when it contains a #child.
So the CSS should end up looking something like this:
#parent {
background: red
}
#parent:contains(#child) {
background: none
}
However, I can't get the :contains pseudo selector to work that way. Is there a way to achieve this?
:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.
Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.
For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.
With jquery
if($("#child").length>0) $("#parent").css("backgroundColor","#fff");
Its not possible with pure css.
I'm woking on a project that heavily relies on the :target psuedo-class.
If the <a> tag has a name and that name is the text after the # and there is no other element with an id equal to the text after the #, then the a receives the :target.
That was confusing, so here's an example:
<style>
* {
color: black;
}
:target {
color: red;
}
</style>
<div id="wrapper">
<ul>
<li>one_link</li>
<li>two_link</li>
<li>three_link</li>
</ul>
<div id="one">div_one</div>
<div id="two_div">div_two</div>
<div id="three_div">div_three</div>
</div>
If you were to click on the "one_link," then "div_one" would turn red. However, if you were to click on "two_link" or "three_link," then they themselves would turn red (because there isn't a div with the id of the # string, but they have the name of the # string)
What I want is for the :target class to work on both the anchor and the div, or at least a way to select the anchor only when the div is targeted. This can probably be done with Javascript, but I'm trying to use pure css.
Not in pure css. There's no way to "program" css to dynamically change a selector to add some extra text based on something that's been clicked. That's waaaay outside the scope of CSS. That's why there's Javascript.
You can exclude the anchor selection by using div:target
* {
color: black;
}
div:target{
color: red;
}
http://jsfiddle.net/
With the same technique you can try with a:target to get only the current targeted anchor
That's not really possible.
You can't use anything like :target ~ div, because of your HTML structure: there is no way to select a parent element. Even if that wasn't a problem, there's no automatic way to map "nth" a to "nth" div.
With license to change the HTML, I came up with this: http://jsfiddle.net/pA84B/ - it's nasty.
Just use JavaScript.
See Google: HTML, CSS, and Javascript from the Ground Up.
JavaScript is built for behavior and interaction. The Google guys explain it well (I think), plus Google is a bit more authoritative than me. You should use JavaScript for this.
I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.
I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).
However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.
Trivial example code that I would like to be able to apply a show/hide to:
<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>
And yes, I do know that jQuery exists.
there is a plethora of options based on the structure (for modern browsers).
Have a look at the
selector + selector adjacent sibling selector
selector ~ selector general sibling selector
selector selector descendant selector
selector > selector child selector
These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.
here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/
Try this using nested divs and targets.
I'm not a CSS guru, so there may be all kinds of flaws with this, but it seems to work.
http://jsfiddle.net/NmdxC/6/
#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }
CSS without the exact code is hard to visualize, but what is wrong with changing the display or visibility declarations dangling from a :hover?
a #myelement{display:none;}
a:hover #myelement{display:block;}
I problably misunderstood the question...care to add code?
First thing that springs to mind is something like:
<a class="blah" href="#">Hello<span>Test</span></a>
a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}
I have a div#content with many div.item inside it.
When using :last-child to make the last div.item with no border-bottom, it's OK.
But, as the content is dynamically appended using php and mysql results I'm using a conditional pagination table that will be appended after the last div.item which means at the bottom of the div#content. Here will be the problem as the CSS :last-child will not recognize the last div.item as the last-child.
my CSS looks like:
div#content div.item:last-child {
border-bottom: none;
}
as you can see I'm defining that the last child id such a div.item
Any suggestions please. thanks in advance.
!!!!! Please note that the problem is not in the fact that the content is dynamic but in the fact that the CSS :last-child doesn't recognize the div.item as the last child but the last element in the div#content despite telling the CSS that it's:
div#content div.item:last-child
One possibility I can think of is that you're appending elements that aren't <div>s and/or don't have the item class. Check the output of your PHP/MySQL script and see if there are any non-div.item elements beside (in DOM terms) the div.item elements.
Such elements will not match the selector:
div#content div.item:last-child
That selector finds only <div>s with item class, that are the last child of div#content.
Here's an example.
Before appending
<div id="content">
<div class="item"></div> <!-- [1] Selected -->
</div>
After appending
<div id="content">
<div class="item"></div> <!-- [2] Not selected -->
<div></div> <!-- [3] Not selected -->
</div>
What's being selected, what's not, and why?
Selected
This <div> element has the item class, and it's the last child of div#content.
It exactly matches the above selector.
Not selected
This <div> element has the item class, but is not the last child of div#content.
It doesn't exactly match the above selector; however, it can possibly match either one of these selectors:
/* Any div.item inside div#content */
div#content div.item
/* The last div.item child of its parent only */
div#content div.item:last-of-type
Not selected
Although this <div> element is the last child, it does not have the item class.
It doesn't exactly match the above selector; however, it can possibly match this:
/* Any div that happens to be the last child of its parent */
div#content div:last-child
It seems appending items dinamically does not make the layout engine re-run some CSS rules like :last-child.
I think you can re-read/reload CSS file making the rule apply. Don't know, it's a guess.
Another possibility is dinamically set the styles.
EDIT: It seems you have a CSS x Browser problem.
Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
you could use javascript to refresh the CSS only. See here: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
Another approach would be to use a library like jQuery and fire this line of script every time you add new divs. (or maybe you're using another js library, as you say that you are dynamically adding divs to the page)
$('div#content div.item:last-child').css('borderBottom','none');
you might need to reset borders before you do the above though. i.e. the previous 'last' div may still not have the border bottom. so reset all borders then fire the script to remove the border for the last one.