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.
Related
I need your help to understand a selector of css that I wuold like to use to hide an element.
At this url you can see the page http://www.bachecahotel.com/annunci/all_ads.html
Well I wuold like to hide "Tutte le offerte" the second one in orange.
DOing some test I succeded in that using this css:
.juloawrapper.adsmanager-list.adsmanager-list-table div > h3:first-child
{
display:none;
}
But I dont understand why it doesn't effect other h3 also if they are child of divs
Thanks
Frank
I want to apply css for 3rd div tag based on whether the checkbox in first div tag is checked or not using css
You can't do that in pure CSS with your current code structure, due to the fact that CSS doesn't have a parent selector. Without adjusting your HTML, you'd have to use a different language. The most common way to solve something like this is with jQuery. Assuming you have access to jQuery, the code would be:
if ($('input.checkbox').is(':checked')) {
$('.div3').css('text-align', 'center');
}
Also bear in mind that you're missing a " at the end of your div3 declaration ;)
I was wondering if there was a way to use css to style a wrapper a certain way ONLY if it had a div with a specific id inside. Let's say that I have
<div class="intro_wrapper"></div>
in several places throughout the site but want to change the padding ONLY if it
<div class="intro_wrapper">
<div id="slider"></div>
</div>
has #slider inside of it. The thing is that I want to make it have less padding when #slider is nested in it so I can't really mess with the margin for #slider without cutting off the content all weird. I tried using negative margins but it ends up cutting off the image I have in a weird way.
I know you can use stuff like p + p for paragraphs that have paragraphs following them, so I am assuming there may be a way to do something like I am trying to. Thanks in advance.
You cannot do that with any CSS rules at this point as a reverse combinator to apply style on parent based on child. Instead you can hack it by adding a margin to the child instead.
div.intro_wrapper > #slider
{
margin:20px;
}
Whilst I think PSL's answer is already pretty good (cross browser, simple etc.) it doesn't help if you actually need to use a parent selector. Whilst at the moment it's best to avoid this when you can, there are definitely some circumstances which may require a parent selector (or some such alternative).
One solution if you absolutely have to use a parent selector would be jquery, its selector engine recongnises the :parent selector, for example you could do:
$("#slider:parent").addClass('padded_intro_wrapper');
Then in your CSS:
.padded_intro_wrapper
{
padding: 20px;
}
Equally, if the #slider div isn't always inside the .intro_wrapper div you could do:
$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');
That's where it starts getting a bit messy though.
EDIT: Fiddle if you're feeling lazy
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+ )
I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?
I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.
I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks
I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?
I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.
I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks
This is not the entire HTML/CSScode, but I could manage to take some screenshots. You guys helped me answer some questions and understand how period is not relevant to what I was trying to do.
Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view) Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup. I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS? I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue? The CSS code is in screenshot 2. After looking at the discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
In CSS, a period without spaces like this.thing means:
select elements that have the class thing but only if they are of type this
Period (.) is a special character in CSS, so you can't name classes with periods. Try an _ or a -.
Actually you can't use period in class names, because it is a class selector. For example, is you have a class "foo" applied to some html element, you can style this element in css linking to it as ".foo".
Example HTML:
<header class="foo">
<img class="bar" src="some/path/here">
Some content here
</header>
Example CSS:
.foo { color: #AAA; }
or
header.foo { color: #AAA; }
In first CSS example the style will be applyed to all elements, wich have class "foo". In the second - to all elements, wich have class "foo" and same time are of "header" type.
Returning to your case, I think the only aim is to apply style to image inside of header element. It can be done different ways:
Use the image class
.bar { width: 100px; }
or more concretely
img.bar { width: 100px; }
Use parent-child relations
header img { width: 100px; }
above will apply styles wich lay inside the header element or in its
children elements
header>img { width: 100px; }
this will be ok only for the direct child of header.
Combine two approaches.
If you know for shure that there will be only one image in header element, I can recommend the approach with ">". Read more about different css selectors, ids and classes. It will do the job.
Assuming your markup looks like this:
<header><img /></header>
The selector you want would be this:
header img {...}
If you really did class your image with class="image" (kinda redundant), then you'd want:
header .image {...} /* note space */
This assumes that the browser supports the html header element. If it doesn't, you'd want to use something like html5shim 1 or modernizer 2