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.
Related
I am looking for how to add a class in css which matches to a specific path (For example, the name of my path is "cities" and I would like to apply to it an other color of stroke or fill.
I try it by different ways, but no result. Is it possible?
Thanks in advance!
This is a rudimentary solution, it won't handle addition of classes, just replacements based on your path.
Create two directories, one called 'red', one called 'blue'. Create pages in each with the following in them. They will read the path and add the class into the DIV called #content.
Here's a Fiddle (note: with a hardcoded path so it works) to demonstrate.
Hope this helps.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red {background-color:red}
.blue {background-color:blue}
.green {background-color:green}
</style>
</head>
<body>
<div id="content">this is the content</div>
<script type="text/javascript">
var locationpath = ""+window.location.pathname+"";
var options = ['red','blue','green'];
for (var i =0;i<options.length;i++) {
if (locationpath.indexOf(options[i])>0) {
document.getElementById('content').setAttribute('class',options[i]) ;
}
}
</script>
</body>
</html>
I am not Exactly sure what you are asking for, pleases post some of your code. But I think you can accomplish what you want by creating multiple classpaths in CSS like this:
#something {
width: 200px;
font-size: 12px;
}
#something.black {
color: #000000
}
#something.white {
color: #FFFFFF
}
And the HTML would be like this:
<h1 id="something" class="black">This Should Be Black</h1>
Etc.
What do you mean by "path" ?
For example, the name of my path is "cities" and I would like to
apply to it an other color of stroke or fill.
If you try to focus elements by "name" you shound use Jquery.
Example:
<input type="text" name="tiluuu"/>
And Jquery
$('input').attr('name','tiluuu').css({'color':'red'});
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
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 ~ * { }
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.
I'm working on adding content to a web-page with javascript. The problem is that the CSS in IE (7) doesn't seem apply to the dynamically added content.
Here's an example document..
<html>
<head>
<style type="text/css">
p.foo { color: #FF4400 ; background-color: #000000 }
p.bar { color: #FF0000 ; background-color: #000000 }
</style>
<script type="text/javascript">
function add() {
var node = document.createElement("p");
node.setAttribute("class", "bar");
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};
</script>
</head>
<body onload="add()">
<p class="bar">bar</p>
<p class="foo">foo</p>
</body>
</html>
In FF, the newly added 'New Content' paragraph has the style applied to it, but in IE, it doesn't. This seems like something obvious enough that it ought to be easily searchable-for, but some obvious queries gave me nothing.
So what's the trick?
Why not use a framework, such as jQuery, MooTools, extJs, Dojo, Prototype, etc., that has already solved all of these problems?
But if you insist on doing it yourself, try using:
function add() {
var node = document.createElement("p");
node.className = 'bar'; // <- use in leu of setAttribute()
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};