CSS Immediate Successor Operator ( >)

CSS Immediate Successor Operator (>) can give a little bit an expected (and potentially) buggy result when combined with first-child pseudo class. Consider the following code jsfiddle.net

/* HTML */

first

second

first

second

</div> /* CSS */ #parent>p:first-child{ color:red; }

The first

element in parent div is highlighted red, which is correct. Now insert a
as the first element parent div jsfiddle.net and now now the first element is not highlighted?

is still an immediate successor of parent div but?

Removing first-child pseudo class, the immedidate successor works correctly. Example jsfiddle

Advertisements
This entry was posted in Tutorials/Tips, Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s