div css multiple class selectors and css class assignment

Question

I am trying to set a background image to a div, but somehow I have problems to understand the selection of the css class attribute.

The identifier which I want to use is the first div (id="ext-element-283") mainmenuitem and x-treelist-row-over and the lower div (id="ext-element-281") menu-po-trek.

How do I have to define the css class selector to apply the css to the specific div. (id="ext-element-281)"

.mainmenuitem .x-treelist-row-over .menu-po-trek {
	height: 64px;
	vertical-align: middle !important;
	background-size: 44px 33px;
	background-image: url("/icons/pltx2/po.png") !important;
	background-repeat: no-repeat;
	background-position: center;
}

<div class="x-treelist-row mainmenuitem x-treelist-row-over" id="ext-element-283">
	<div class="x-treelist-item-wrap" id="ext-element-258" style="margin-left: 0px;">
		<div class="x-treelist-item-icon menu-po-trek" id="ext-element-281"></div>
		<div class="x-treelist-item-text" id="ext-element-280">Po</div>
		<div class="x-treelist-item-expander"></div>
	</div>
</div>

I think the answer is : "read more about how CSS selector works" and then you will get your answer — Temani Afif
– Temani Afif, Commented Jan 26, 2018 at 23:00

pavger · Accepted Answer · 2018-01-26 22:54:01Z

1

Unless I'm not fully understanding your question, if you want to set a background image to a specific div do this:

#ext-element-283 {
    height: 64px;
    vertical-align: middle !important;
    background-size: 44px 33px;
    background-image: url("/icons/pltx2/po.png") !important;
    background-repeat: no-repeat;
    background-position: center;
}

If you want to apply the css to 2 divs then do this:

#ext-element-283,
#ext-element-281 {
   height: 64px;
   vertical-align: middle !important;
   background-size: 44px 33px;
   background-image: url("/icons/pltx2/po.png") !important;
   background-repeat: no-repeat;
   background-position: center;
}

answered Jan 26, 2018 at 22:54

pavger

6832 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

benny-ben · Accepted Answer · 2018-01-26 23:30:27Z

To select the classes use the dot "." (e.g. .mainmenuitem) while to select the IDs use the hash "#" (e.g. #ext-element-283). Try with this:

#ext-element-283 {
	height: 250px;
	background-image: url("http://via.placeholder.com/500x250/E8117F/AAAAAA");
	background-repeat: no-repeat;
	background-position: center;
}

#ext-element-281 {
	height: 150px;
	background-image: url("http://via.placeholder.com/150x150/ffffff/000000");
	background-repeat: no-repeat;
	background-position: center;
}

<div class="x-treelist-row mainmenuitem x-treelist-row-over" id="ext-element-283">
	<div class="x-treelist-item-wrap" id="ext-element-258" style="margin-left: 0px;">
		<div class="x-treelist-item-icon menu-po-trek" id="ext-element-281"></div>
		<div class="x-treelist-item-text" id="ext-element-280">Po</div>
		<div class="x-treelist-item-expander"></div>
	</div>
</div>

Johannes · Accepted Answer · 2018-01-26 23:43:35Z

0

regarding the last sentence of your question, that will be

#ext-element-281.x-treelist-item-icon.menu-po-trek { ... }

i.e. all classes and the ID written in one string, without spaces, with leading dots for the classes and a leading # for the ID

Actually the ID alone should be enough, since IDs are unique, but if you need a selector with higher specifity to overwrite another rule, that's the way to go

answered Jan 26, 2018 at 23:43

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

div css multiple class selectors and css class assignment

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related