Is there a way to specify a first element *type*?_问答_开发者

Is there a way to specify a first element *type*?

开发者 https://www.devze.com 2023-03-08 11:05 出处：网络

I want to know is there any way to get the following example of CSS to work as I intend it to? <!DOCTYPE html>

I want to know is there any way to get the following example of CSS to work as I intend it to?

<!DOCTYPE html> 
<html>
<head>
<style type="text/css">
.col p:first-child {
   background:yellow;
}
</style>
</head>

<body>
<div class="col">
    <h1>Woot</h1>
    <p>I am a super nun. I am a super nun.</p>
    <p>I am a super nun. I am a super nun.</p>
</div>
</body>
</html>

Basically I need the first <p> of an element to be styled a certain way... but first-child doesn't work if it's the second child (duh), even if I attemp开发者_开发问答t to say: "the first <p> element in a parent (i.e. .col p:first-child)".

Is it possible to select not the first-child, but the first-child of a specific type in CSS?

Fortunately, for element types, CSS3 supplies the :first-of-type pseudo-class (there is no first of class, first of pseudo-class, first with a certain attribute, etc).

.col > p:first-of-type

Unfortunately, since it's a CSS3 selector, browser support for it is pretty poor. Of all IE versions, only IE9 supports it.

If the structure of .col is predictable (enough) in that, for example, it always contains one element followed by a p, you could do something like this instead, with just CSS2 selectors: