Different style depending on child element

HTML & CSS
1

Hi I would like to know if there is a way to style an li based on the presence or not of an <a> child element.

e.g. <li>text</li> would have a black bullet

but

<li><a href=“#”>text</a></li> would have a blue bullet

2

Hi,
It sounds like you are wanting a parent selector but that can’t be done with CSS. It could be done with JS but other than that your best bet would be to set up some classes.

3

you could CHEAT.

If the content is inline, by wrapping a span directly within the anchor and giving the anchor a display block. now you can style like this

li a {display:block ; +rules for when there is an a }
li a span{INLINE rules you would have used on the anchor}

keep in mind this only works if the content with anchor is inline … you cant do: li a a{} as it’s not valid HTML… yet.

4

Hi,

You would be better off adding classes to achieve the effect but it could be done automatically like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.bullet {
    list-style:disc;
    margin:0 0 1em;
    padding:0 0 0 2em;
}
.bullet li {
    color:#000;
    margin:0 0 2px;
}
.bullet li a {
    display:list-item;
    list-style:disc;
    color:blue;
    position:relative;
    background:#fff;
}
/* ie6*/
* html .bullet li a{
    zoom:1.0;
}

</style>
<!--[if gte IE 8]>
<style type="text/css">
.bullet li a{float:left;clear:left;}
</style>
<![endif]-->

</head>
<body>
<ul class="bullet">
    <li>List Black Bullet test</li>
    <li>List Black Bullet test</li>
    <li>List Black Bullet test</li>
    <li><a href="#">** Blue Bullet test **</a></li>
    <li>List Black Bullet test</li>
    <li>List Black Bullet test</li>
    <li>List Black Bullet test</li>
</ul>
</body>
</html>

The anchor is turned into a list item also and therefore its blue bullet sits on top of the black bullet and gives you the effect you were looking for :slight_smile:

5

:frowning:

:frowning:

:frowning:
:frowning:

>|O

6

I particularly like the line: With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.

… as though giving people Frontpage, Dreamweaver, JQuery, Javascript, XHTML, CSS and every other web development tool available didn’t give people plenty of opportunities to stuff up their sites. Web development should not be about catering for the lowest common denominator, it should not be about catering for people who can neither write correct code nor be bothered to look at the results of what they have written, it should be about extending the capabilities of what we can do, and a parent selector would do this.

I do take the point about performance issues in pages with content dynamically added or removed.

7

excellent solution as usual Paul, thanks!

an interesting discussion on css-tricks, as long as there are alternatives I have no need for parent selectors, although I agree that the fact that some people may use them wrongly does not mean they shouldn’t be considered.

8

As Paul’s code shows, a lot of times you can say something else that gives you the same effect. But I’d still like some parent selectors. : )