CSS selector, find first appearance in nested content

Question

I tried different things for the first element to set its display property to lock, the rest should be set to none. But I can’t get only the first appearance of the element, every time I use the selector, I get all the elements or none of them. Maybe some of you know some CSS tricks to solve my problem.

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 view of the "object". I cannot change the HTML and find a way to solve this problem using a good CSS selector. Does anyone have an idea?

I tried code like: .some_class p > object:first-of-type but in this way each "object" is selected ... because each "object" is the first of its kind to its parent "p".

Answer 1

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

try it

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

This will select all the objects in the p element, so use this if you have only one element of the object in p, if you use this one a little

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

Answer 2

Have you tried something like 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;}

Answer 3

If interested, a simple JS line can do this:

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

(Just fun with querySelector() , as it was for me.)