Not sure if this is doable in css but what I was wanting to do is
Say, you have your html structure like below:-
<h4>Title <span class="specific"> text </span> </h4>
<div>
<p> This is some text. </p>
</div>
Now, I want to style the div p elements but I want to use h4 span.specific as a relation for div p element.
Using parenthesis, it might look like this. (h4 span.specific) ~ (div p)
Just wanted to know if this can be done with only CSS.
Unfortunately not, selectors consists of relations between single elements (+ pseudo-classes). You would like to have relations between selectors, which isn't possible as today and won't be in CSS4.
The problem is that if you traversed down in the DOM tree using CSS, there's simply no way to traverse up (apart from the Determining the subject of a selector selector !), so one cannot create such relation.
In order to fix this you must be able to recognize the h4 > span.specific without looking at the span, for example apply the class on the h4 instead.
References:
http://dev.w3.org/csswg/selectors4/#overview
http://www.w3.org/TR/css3-selectors/#selectors
Parenthesis is not valid CSS selector operator.
The sequence of selectors and combinators is read from right to left.
<h4 class="specificParent">Title <span class="specific"> text </span> </h4>
<div>
<p> This is some text. </p>
</div>
CSS:
h4.specificParent~div>p {
background-color: red;
}
It interprets the above statement as
Select an p element
that has parent div
that is sibling of h4 which has specificParent class
Please find the working demo here: Demo
you can only achieve this by this
i cant find any other solution for this
http://jsfiddle.net/8QBkz/
h4 ~ div p{
color:green
}
CSS is really powerful and will help you to do so.
Instead of (h4 span.specific) ~ (div p), use
h4 > span.specific + div > p
Hope that helps.
Edit:
you cannot specify span.specific, however you can say a p inside a div followed by an h4, i.e
h4 + div > p.
Apologies for the confusion.
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 1 year ago.
I wrote a css selector that doesn't work. I want to understand why.
The following html:
<div class="container">
<br>
<br>
<p id="copyright">...</p>
</div>
I wrote the expression:
div[class='container']>br:last-child
Because i read that:
x:last-child selects all last-child x elements.
So why this expression returns nothing?
The last child of div[class='container'] node is <p id="copyright">...</p> element.
To select last br child you need to use :last-of-type, something like this:
div[class='container']>br:last-of-type
In your sample p is the last child. Here it's colored in red:
div[class='container'] p:last-child{
color: red
}
<div class="container">
<br>
<br>
<p id="copyright">test</p>
</div>
You likely aren't seeing any styles being applied because br tags are extremely limited in styling options. br tags simply generate a line break. So there's not really any content or dimension to them to style.
To show your selector is working, you can target the p tag instead of the br tag and you'll see the styles apply just fine. So change to div[class='container']>p:last-child. This is technically verbose as you could just as easily use this selector: .container p:last-child which is much more readable and clear. Just fyi.
I hope that gets you unstuck and moving towards a solution. Let me know if I've missed something.
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;
}
I experimented with using the :only-child pseudo-class but unfortunately this does not seem to consider the text nodes:
<style type="text/css">
div span:only-child {
color: red;
}
</style>
<div>
Test
<span>This still becomes red :(</span>
</div>
<div>
<span>This becomes red, as it should!</span>
</div>
<div>
<span>This does not become red - great!</span>
<span>This does not become red - great!</span>
</div>
I am trying to find a way to detect when a specific element is completely alone within its container element in a situation where I am unable to introduce new classes.
Is there a way to achieve this with CSS?
Is there a way to achieve this with CSS?
Unfortunately, not.
Included in an old revision of the CSS Working Group "mistakes" list is missing the idea that..
No naked text mixing with elements. All raw text should have an addressable, stylable element wrapping it, created by CSS if necessary.
Current list
Text Nodes are not element and CSS can't select (or ignore) elements that don't exist.
So, it's probably best practice to always use a text element when incorporating text in a page...you never know when you might need to style it.
div:nth-child(2) span {
color: red;
}
https://jsfiddle.net/cmckay/8663aLcg/
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 think this is impossible :-(
Using CSS, I need to select the last label in the list of paragraphs, which is inside of a span.
<div>
<p>
<span>
<label>no good, because not the last</label>
</span>
</p>
<p>
<span>
<label>good</label> <!-- This one should be selected -->
</span>
</p>
<p>
<label>no good, because is not inside of a span</label>
</p>
</div>
Virtually the selector would be something like this:
div (p > span):last-child label {
background: red;
}
But I don't think CSS understands parenthesis (yet).
The reason for this is that ExtJS (Sencha) puts radio buttons in nested containers. The visibility of buttons is declared in the inner containers (that would be the span tags in the example above). I want to round corners of the last VISIBLE label, thus I need to find the last outer container that has an inner container declaring it's visibility.
Perhaps there is a different workaround for this? As a last resort, I'd accept a JS solution, as long as it's based on native ExtJS components/elements traversing syntax, rather than jQuery.
Please ask for more detail if needed.
It will (maybe, depends on if the selector will be in the final spec) partly be possible with CSS 4:
!p > span {
background: red;
}
But this will select all <p/> that have a <span/> inside, not only the last one. CSS currently does not know a :last selector, and as far as I can see even with CSS 4 this won't be implemented1.
So the summary is: Currently there is no way to do this in pure CSS.
Currently your only option is to use JavaScript. A sample in jQuery would be:
$('p:has(span)').last().css({ 'background': 'red' });
Here is a demo.
Or, as you mentioned in your comment, with extjs:
Ext.select('p:has(span):last').setStyle('background', 'red');
Here is a demo.
Answer to your updated question
Your new example does not need a parent selector anymore. The partly working CSS would be
div > p > span > label {
background: red;
}
But still: There is no :last selector in CSS1. Updating the above JavaScript samples:
jQuery:
$('div > p > span > label').last().css({ 'background': 'red' });
extJS:
Ext.select('div > p > span > label:last').setStyle('background', 'red');
1 About the :last selector:
To make it more clear: :last-child selects the last child inside an element in the dom, whatever it is. It is no sub query. So, even if your parenthesis version would be implemented, :last-child would select nothing because the really last element is not part of the query. You would need a :last selector like in some JavaScript libraries which selects the last item of the resultset, so it's a sub query. This is a completely different selector and will not be part of CSS soon.