I want to select all descendant elements of the element with class="x" this way:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.x * {
color: red;
}
</style>
</head>
<body>
a
<p>
b
<p class="x">
c
<p> should be red </p> foo
</p>
</p>
</body>
</html>
which unfortunately does not apply to those elements. neither *.x * does.
what am i doing wrong?
You can't have a <p> in a <p>. Try changing your inner <p> tag to a <span> tag.
Hope this helps
I know this is old but the answer is: .x, .x +* { }
ETA: I misread the question. The answer is: .x ~ * { }
Related
I'm in a situation where the number of elements showed is variable, and I need a strange solution which I'm not able to achieve, I even doubt if it's achievable only with css.
I need to select the last-child if my number of elements is odd, and the last 2 child if the number of elements is even.
I've been trying with nth-last-child, :not(:nth-last-child()), odd and even, but never got a good solution.
Anyone has any idea/advice about this issue a part of adding a class "odd" like on html tables?
Thanks a lot in advance!
Here is one way...
.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
color: red;
}
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
</div>
<hr>
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
</div>
You can use CSS like so:
li:last-child:nth-child(odd) {
/* Last child AND odd */
background: red;
}
li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
/* Before last child AND odd */
/* Last child AND even */
background: green;
}
Demo: https://jsfiddle.net/hw0ehrhy/
Absolutely it can be done, with pure CSS. See the complete code below (odd child, last child red; even childs, last 2 childs green)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#but1').click(function(){
var count = $('p').length;
if (count%2!=0) {$('div>p:last-child').css('background','red');}
else {$('div>p:last-child').css('background','green');alert(count);
$('div>p:nth-last-child(2)').css('background','green');
}
});
});
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one. </p>
<p> This is two. </p>
<p> This is three. </p>
<p> This is four. </p>
<p> This is five. </p>
<p> This is six. </p>
</div>
</body>
</html>
Enjoy, the coding ;)
How would I do this? For example, if I wanted to match all <p> tags which contain nothing but an empty <span>? Is this possible without modifying the DOM or using JavaScript?
It is not possible. Why? There's an :empty selector which works like in the following example:
<div>
<p></p>
<p> blah </p>
<p> blah 2 </p>
</div>
div > p:empty {
background:red;
}
-> The first p would have a red background.
But what you're looking for is something like this
div < p:empty {}
which would be some kind of parent selector. At the moment there is no way to accomplish this unfortunately.
Earlier there was a :contains selector
div:contains(p:empty) {}
but it's deprecated now.
Here's a demo of one way you could do it with JS: http://codepen.io/pageaffairs/pen/ELkJa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.empty {background: #e7e7e7; height: 30px;}
.empty::before {content: "Paragraph with empty span!";}
</style>
</head>
<body>
<p><span>Span 1</span></p>
<p><span>Span 2</span></p>
<p><span></span></p>
<p><span>Span 4</span></p>
<script>
(function() {
var span = document.querySelectorAll('span');
for (var i = 0, ii = span.length; i < ii; i++) {
var para = span[i].parentNode;
var paraClasses = para.classList;
if (!span[i].innerHTML) {
paraClasses.add('empty');
}
}
}());
</script>
</body>
</html>
As mentioned, there's no parent selector available in CSS, and even though one is proposed, even that will only work with the support of JavaScript.
I would like to use CSS to target an element that is a "cousin" of a specific element — in other words, where they are both descendants of sibling elements.
I can target an element based on its "uncle" or a sibling of an ancestor, like this:
HTML:
<div>
<h2 data-section="name">Name</h2>
<p class="hint">Full name of the employee</p>
<p>
<span class="value1">Joe Tester</span>
</p>
</div>
<div>
<h2 data-section="details">Occupation</h2>
<p class="hint">Job role or title</p>
<p>
<span class="value1">Software Engineer</span>
</p>
</div>
CSS:
/*
* element that
* has a class of value1
* and is a descendent of a p
* that is next to an h2
* with attribute data-section=name
*/
h2[data-section="name"]~p .value1 {
color: #F92759;
}
Result:
But what if the data-section="name" element is wrapped in another element? Is it still possible to make the following HTML the same as the image above?
<div>
<div>
<h2 data-section="name">Name</h2>
</div>
<p class="hint">Full name of the employee</p>
<p>
<span class="value2">Joe Tester</span>
</p>
</div>
The practical application: Targeting a node in a page (inside body tag) that has a particular meta element.
Example JSFiddle here: http://jsfiddle.net/nchaves/tefpY/
There isn't a css-only solution for this. You can, however, accomplish this using jQuery:
<script>
$("[data-section='name']").parent().parent().addClass('myclass');
</script>
<style>
.myclass .value2 { color: #F92759; }
</style>
JS Fiddle here: http://jsfiddle.net/tefpY/1/
I've been reading a lot about CSS inheritance but I haven't been able to find anything about this question, and I'm confused. Please consider the following:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
background-color: blue;
color: red;
}
.des {
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="anc">
<p class="des">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<p class="anc">
<div class="des">
Two <!-- Why is nothing inherited here? -->
</div>
</p>
</body>
</html>
The "One" text is working as I'd expect. But I don't understand why the "Two" text doesn't have a blue background and red text as well.
Is there some special rule about inheritance for block elements as opposed to inline elements? Or something special just about div? What am I missing here? Do you have an online reference to a very thorough explanation of inheritance? Everything I've seen (and I've been looking a long time) just explains examples like "One", but doesn't address issues like "Two".
I know that there are many (better) ways to get the same visual effect I'm asking for here. But this example is about me trying to understand inheritance in general, not trying to get any particular effect on this HTML code.
Thank you so much for your help!
A <div> inside <p> tag is not valid HTML. If you check the rendered HTML, it probably looks something like this:
<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>
The browser fixes the invalid nesting, but that breaks your CSS definition.
You can't nest block-level elements inside a <p> - the opening <p> ends up acting as a self-closing element and pushes the descendant div out of the <p> as a succeeding sibling. The paragraph also creates an empty <p> after the div; the structure ends up looking like:
<p class="anc"> </p>
<div class="des">Two</div>
<p></p>
A <p> can only contain inline elements. It is invalid to put a <div> in a <p>.
You swapped <div> and <p> in the second case. Also your css specifies .des, whereas your class name in the HTML is dec See working jsFiddle here.
<div class="anc">
<p class="dec">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<div class="anc">
<p class="dec">
Two <!-- Why is nothing inherited here? -->
</p>
</div>
.anc {
background-color: blue;
color: red;
}
Also, there's no need for the inherit as the child will be rendered within the parent, whose style you set already.
How can I make this link use the child selector without changing or removing the parent selector? (I want the link to be blue.)
<html>
<head>
<style>
.parent a { color:Red; }
.child { color:Blue; }
</style>
</head>
<body>
<div class="parent">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>
</body>
</html>
It is surprising to me that the parent overrides the child in this case!
Use a.child as the selector.
<html>
<head>
<style>
.parent a { color:Red; }
a.child { color:Blue; }
</style>
</head>
<body>
<div class="parent">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>
</body>
</html>
This is due to CSS specificity. The extra a after .parent makes it more specific than just .parent, and correspondingly, more specific than just .child. Obalix's suggestion gives the selectors the same specificity, with both having a base HTML element and a class designation. When specificity is equal, it will then apply the deepest value specified in the hierarchy, as you were expecting.
This article (and the resources to which it links) do a great job explaining CSS specificity: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
For future exploring http://css-tricks.com/specifics-on-css-specificity/
basically you can count selectors value in this order
Inline | ID | Class/pseudoclass | Element
1 | 1 | 1 | 1
where Inline = 1000, ID = 100, Class = 10, Element = 1
In your case
.parent a == 11 and .child == 10 thats why parent overrides child element style.