如何将CSS应用于没有类的div？

Question

I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.

<div class="class_name"></div>
<div style="display:block;"></div>

After applying style the second div style will be style="display:none;"

Please suggest.

Answer 1

You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:

To target very next div you need this:

.FirstClassName + div{
  /*your style goes here */
}

To target all divs in a parent after a given class name:

.FirstClassName ~ div{
  /*your style goes here */
}

Demo

Answer 2

You can use :not selector for the second div :

div:not([class="classname_of_the_first_div_here"]){}

or even simpler :

div:not(.classname_of_the_first_div_here)

Answer 3

假设在创建两个div元素之前没有其他div ：

document.getElementsByTagName("div")[1].style.color = "blue";

Answer 4

在第二个div中使用样式属性

<div id="div1" style="display:block;"></div>

Answer 5

if it has only two div's then use the last-child property.

yourparent div:last-child
{
your style
}

Answer 6

You basically have three options (maybe more, but then we need some code).

First one, use the element selector. but that means you're styling all elements of the same type on the page

div { background: red; }

Second option, style all divs that have no class attribute:

div:not([class]) { background: green; }

and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.

div.parent > div { background: blue; }

Checkout the Fiddle here