CSS Selector, find first appearance in an nested content

问题

I tried some different things to get the first element to set its display property to block, the rest should be set to none. But I'm not able to get just the first appearance of the element, every time I use a selector I get all elements or none of them. Maybe some of you know some CSS Tricks to solve my Prob.

Here is my code:

<div class="some_class">
<p>...</p>
<p>...</p> 
<p> <object height="300" width="480"></object></p> 
<p> <object height="300" width="480"></object></p> 
<p> <object height="300" width="480"></object></p> 
<p>...</p></div>

I need to get the first appearance of "object". I can't change the HTML and have to find a way to get this problem solved by using a nice CSS selector. Anybody an idea?

I tried code like: .some_class p > object:first-of-type but that way every "object" gets selected... because every "object" is the first of its type of their parent "p".

回答1:

Note: This will only work when elements are static, can change nth-of-type() for p, but if the elements are dynamic, you need to go for JavaScript

Try this

.some_class p:nth-of-type(1) object {
   /* Styles goes here */
}

This will select all objects in p element, so use this if you only have a single object element in p, if you've multiple than use this

.some_class p:nth-of-type(1) object:nth-of-type(1) {
   /* Styles goes here */
}

回答2:

Have you tried something similar to this

div.some_class:first-child p object { display:block;}

I'm not sure if this works, but it will work for this kind of structure

div.some_class:first-child .some_class2 { display:block;}

回答3:

In case it's of interest, a simple line of JS can do this:

document.querySelector("p object").style.display = "block";

(Just having fun with querySelector(), as it's new to me.)

来源：https://stackoverflow.com/questions/16395772/css-selector-find-first-appearance-in-an-nested-content

标签

css

selector