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/
Related
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;
}
Here is an HTML fragment:
<div class="wrapper">
<div class="ebook">
<div class="page"></div>
</div>
<div class="book">
<div class="page"></div>
</div>
<div class="document">
<div class="page"></div>
</div>
</div>
I want to match all divs with the page class with parents divs having ebook or book classes only. This selector can be used:
div.ebook div.page, div.book div.page
However is there a CSS engine suporting the following syntax ?
(div.ebook, div.book) div.page
or better
div.?book div.page
I'm not interested with a solution like this: div:not(.document) > div.page.
The proposed syntax takes the form of a functional pseudo-class called :matches():
/* As this is a pseudo-class, you can make it a little DRYer by saying
div:matches(.ebook, .book) div.page instead */
:matches(div.ebook, div.book) div.page
If you really want to get technical, Firefox implements it as :-moz-any():
:-moz-any(div.ebook, div.book) div.page
and Chrome implements it as :-webkit-any():
:-webkit-any(div.ebook, div.book) div.page
(and these actually came first prior to the selector being specced as :matches())
But if you're using them in CSS you will have to duplicate your rulesets because of certain CSS parsing rules, which is as good as not using them at all (in fact, worse). These selectors are meant for internal use only, not for production.
What you currently have is the only viable option for now.
If you want to cheat a little, you could use a substring attribute selector, but that assumes each of those elements will have exactly one class only, and no other class names will match by this particular substring (this is similar to the div.?book example you have, but it comes with the limitations of an attribute selector that are not present in a class selector):
div[class$="book"] div.page
Personally, I'd just stick with the verbose option because it's more robust.
Check out this Fiddle that should do what you're looking for:
http://jsfiddle.net/Delorian/L44u0p8r/
div[class$="book"] {
background-color: yellow;
}
Further details: https://stackoverflow.com/a/9836182/3264286
There is no such thing as an OR selector in CSS, except for as in the example you gave, where a comma (,) can be used to separate multiple selectors e.g;
div.ebook div.page,
div.book div.page{
// CSS properties
}
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
I have a <div> classed as class="tooltip" which is normally hidden with display:none.
I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.
Here is the simplified version of my code :
<img id="slot" class="single" src="slot.png" usemap="#slot"/>
<map name="slot">
<area
shape="poly"
coords="30,0,61,15,31,31,0,16"
alt="Slot"
href="#trigger-happy">
</map>
<div class="fixed-container">
<div class="tooltip">
Slot
</div>
</div>
As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.
Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.
It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.
You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.
Here is a working example.
Updated HTML:
<div class="fixed-container">
<div id="trigger-happy" class="tooltip">
...
</div>
</div>
Use the :target pseudo class to style the targeted element, #trigger-happy.
The base CSS would look like this:
#trigger-happy {
display:none;
}
#trigger-happy:target {
display:block;
}
The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.
In class we are teached to avoid creating ID's in your HTML so you can use them to identify that element in your CSS file. Instead we must use selector specifity as much as possible.
Take for example this simple HTML:
<body>
<div>
<div>
<div>
The div you want to style.
</div>
</div>
</div>
</body>
Is it better to use this:
body > div > div > div{
color: blue;
}
or give the element an id (let's take 'middle') and use this:
#middle{
color: blue;
}
What are the differences (if any at all) performance and usability wise?
The difference in speed between IDs and Classes in modern browsers is so negligible in real world situations it is really not an issue. Therefore current main-line thinking is to use classes where extra clarity and specifity is needed. This way you avoid specifity wars and balances maintainability with code purity.
<body>
<div>
<div class="more-specific-if-needed">
<div class="middle">
The div you want to style.
</div>
</div>
</div>
</body>
.make-more-specific-if-needed .middle {
/* cool styles */
}
Or even use chained selectors to gain extra specifity. You could then split styles in to separate structure based build styles and appearance based theme styles.
<body>
<div>
<div>
<div class="semantic-role theme">
The div you want to style.
</div>
</div>
</div>
</body>
.semantic-role.theme {
/* cool styles */
}
For further reading:
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
Why do browsers match CSS selectors from right to left?
Performance wise it's fastest to get an element by its id than it is to traverse the dom.
From a usability point of view I would be careful using too many id's since they can be only used once for an element.
So it's a question of what you think is more important and how many items we are talking about. Is the speed gain worth the losing of re-usability
Much better to use ID. Performance difference is minimal, and not the important point. I think code readability / maintainability is more important.
One advantage of using ID, is that you could move your element to a different part of the page, and it would retain it's style rules - without counting the containing elements.