I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
Related
I am looking for a way to apply a CSS style to only a particular div and all of its children
<div id="1">lots of stuff i cant customize</div>
<div id="2">lots of other stuff I cant customize</div>
I want to apply styles1.css to div 1 and styles2.css to div 2. Usually I would just use different class elements for each div and customize the CSS how I need it. The problem is that I dont have access to the underlying code. So I was hoping to have something like:
<div id="1" style="style1.css">lots of stuff i cant customize</div>
<div id="2" style="style2.css">lots of other stuff I cant customize</div>
I really dont care about the implementation if I have to use jquery or something, but I cannot modify the underlying divs/uls/etc... to modify their classes.
Thanks,
Brian
You can use :nth-child() to target them via their position in the parent's children.
div:nth-child(1) { /* apply style1 css here */ }
div:nth-child(2) { /* apply style2 css here */ }
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/
I have an app with relatively complex DOM structure with 20+ layers of divs.
If I have a div with class="active" somewhere in the middle of the tree, how can I select it's parent n layers up in the tree using CSS?
For example, how do I select the div marked in uppercase (4 layers up) in the following tree ? :
<DIV>
<div>
<div>
<div>
<div class="active">
</div>
</div>
<div>
</div>
</div>
</div>
</DIV>
Same considering first-child ? How to select a first-child n layers down the tree ?
Unfortunately, there is no such thing as a parent selector. You'll have to set a class on the desired element directly, either by hand, or with some server-side code, or via JavaScript.
Based on this article I found titling CSS4 Preview, it will be possible in CSS4 to style parent elements. The article shows that it would be possible to style parent elements like the following:
$div > div > div > div.active { border: 1px solid #ccc; }
(Given example would style the div nested 3 layers up in the tree related to div.active)
Going back to my app, using PHP and inline CSS, I would be able to control the n (nesting depth).
Until CSS4 though, I will use some kind of jQuery solution.
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this