CODEWITHSUNDEEP
htmlcsscss-selectors
Jens H
Jens H

Reputation: 115

div css multiple class selectors and css class assignment

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>

Upvotes: 1

Views: 459

Answers (3)

Johannes
Johannes

Reputation: 67748

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

Upvotes: 0

benny-ben
benny-ben

Reputation: 422

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>

Upvotes: 1

pavger
pavger

Reputation: 684

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;
}

Upvotes: 1

Related Questions