how can I compound css selectors together

Question

is it possible to use a :not() selector with a :nth-of-type(1) selector?

i.e. I want to select the first

that doesn't have the title "something"

<html>
    <head>
        <style type="text/css">
            p
            {
                color:#000000;
            }
            p:not([title=something]):nth-of-type(1)
            {
                color:#ff0000;
            }
        </style>
    </head>
    <body>

        <h1>This is a heading</h1>

        <p title="something">This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <p>This is another paragraph.</p>

        <div>This is some text in a div element.</div>


    </body>
</html>

Chaining pseudo classes like that will not work. You should rethink the structure of your CSS to avoid `:not()`. — approxiblue, Mar 01 '12 at 20:52
It seems to me like, with the described HTML and selector, nothing would be matched. There does not exist an element that matches both conditions, i.e. that is the first of type `p` and does not have a title of `something`. Is this correct? — Emily, Mar 01 '12 at 20:53

score 4 · Accepted Answer · edited Apr 04 '12 at 13:36

4

The nth-of-type is acting on the original selector (p), it's not acting on the result of p:not([title=something]).

p:not([title=something]):nth-of-type(1)

This is saying, find the <p> without a title of "someting" that is also the 1st <p> on the page. This doesn't find any elements as the 1st <p> has the title "something".

What you want is the 1st <p> that doesn't contain the title "something". I don't know if CSS has a good way of doing that.

If you're willing to use jQuery, you can use do this:

$('p:not([title="something"]):eq(0)')

or:

$('p').not('[title="something"]').eq(0)

edited Apr 04 '12 at 13:36

BoltClock

700,868
160
1,392
1,356

answered Mar 01 '12 at 20:53

gen_Eric

223,194
41
299
337

Thanks for the info. I was hoping to do this in pure css, but it seems as though I'll have to use jQuery. The reason for the question is that my content is auto generated, so I wanted to get the first item that didn't have the title attribute. But you have helped my understanding of the pseudo selectors :) – Koenyn Mar 06 '12 at 10:20
@Koenyn: You're welcome. Yeah, CSS cannot do what you want, yet. – gen_Eric Mar 06 '12 at 14:22
@BoltClock'saUnicorn: Better late than never :-) – gen_Eric Apr 04 '12 at 13:44

score 3 · Answer 2 · answered Mar 01 '12 at 20:52

The problem is that the nth-of-type pseudo-class is defined as:

[nth-of-type] matches elements on the basis of their positions within a parent element’s list of child elements.

So the pseudo-class :nth-of-type(1) is limiting your selection to the p child at position 1.

Your pseudo-class not([title=something]) is limiting your selection to the p elements without the attribute/value title='something', just as you suspect.

The two selectors together are resulting in no elements because the p child at position 1 has title='something'.

For a better understanding, try the following:

p:nth-of-type(1) { color: red; }
p:not([title=something]) { text-decoration:underline; }

More information: Pseudo-classes, nth-of-type

score 2 · Answer 3 · edited May 23 '17 at 12:11

2

As mentioned by the other answers, :nth-of-type() only refers to the element type, which in this case is p. The selector p:not([type=something]):nth-of-type(1) simply means a p element that is :not([type=something]) and is also the first p.

Anyway, what you're asking can be done in pure CSS using the general sibling selector, but may involve unnecessarily verbose and repetitive selectors:

p:not([title=something]) ~ p:not([title=something])
{
    color:#000000;
}
p:not([title=something])
{
    color:#ff0000;
}

If you just want to apply this to p elements without a title attribute, you can shorten your selectors a little:

p:not([title]) ~ p:not([title])
{
    color:#000000;
}
p:not([title])
{
    color:#ff0000;
}

I came up with this technique for use with classes first, which I describe in greater detail here, but it can be applied to a number of things, including attributes, for which I have another example here.

edited May 23 '17 at 12:11

Community

1
1

answered Apr 04 '12 at 13:35

BoltClock

700,868
160
1,392
1,356

Woah, that's awesome! I didn't know about the `~` character in CSS. – gen_Eric Apr 04 '12 at 13:43
People need to use it more; despite being a CSS3 selector, it enjoys the same level of browser support as `+` does. – BoltClock Apr 04 '12 at 13:43
1

@Rocket: `~` is all siblings that come after; `+` refers to just what comes *immediately* after. – BoltClock Apr 04 '12 at 13:47

how can I compound css selectors together

3 Answers3

Linked