How to structure selectors in css when using specificity?

Question

I have div where i have css class orcitMultiselectTreeviewHeight and inside i have another div element that is using orcitMultiselectTreeview and inside i have another div that is using class orcitMultiselectTreeviewTagList. So i want to target styling for orcitMultiselectTreeviewTagList. how can i achieve this task ?

main.css

.orcitMultiselectTreeview.orcitMultiselectTreeview .orcitMultiselectTreeviewTagList { 
    max-height: 5em;
    overflow: scroll;
    }

Can you please post a snippet of your HTML, it is hard to be sure the exact structure that you are using — Adjit
– Adjit, Commented Jan 19, 2016 at 16:53

Adjit · Accepted Answer · 2016-01-19 17:24:41Z

1

If you are targeting an element with 2 classes and want to specify both classes there is no space between the selectors. If it is a child then there is a space. Direct child you use >

<div class="class1 class2">
   <div class="class3">
       <div class="class4">

       </div>
   </div>
</div>

CSS-

.class1.class2 { //selects the base div }
.class1 .class4 { //selects class4 div only }
.class1 > .class4 { //selects no div as class4 is not a child of class1 }
.class1 .class3 .class4 { //selects class4 }
.class1.class2 .class3 > .class4 { //selects class4 as a direct child of class 3 }

edited Jan 19, 2016 at 17:24

answered Jan 19, 2016 at 16:50

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

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

Comments

Daniel Hansen · Accepted Answer · 2016-01-19 16:51:13Z

1

I'm assuming you have a typo in your list of selectors, and that it should read: .orcitMultiselectTreeviewHeight .orcitMultiselectTreeview .orcitMultiselectTreeviewTagList

Also, notice the space between each selector, denoting them as children of each.

answered Jan 19, 2016 at 16:51

Daniel Hansen

1565 bronze badges

3 Comments

aftab Over a year ago

another problem when input is 5em scroll should appear that is not happening

Daniel Hansen Over a year ago

@aftab Can you share the relevant HTML and CSS?

Rounin Over a year ago

I think this should be the accepted answer to the question. +1.

Rounin · Accepted Answer · 2016-01-19 16:58:59Z

0

So i want to target styling for .orcitMultiselectTreeviewTagList. how can I achieve this task ?

If you are using .orcitMultiselectTreeviewTagList in many places throughout the document and you want to target this instance alone, the correct selector is:

.orcitMultiselectTreeviewHeight .orcitMultiselectTreeview .orcitMultiselectTreeviewTagList {

[STYLES HERE]

}

edited Jan 19, 2016 at 16:58

answered Jan 19, 2016 at 16:57

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

2 Comments

aftab Over a year ago

but i just want to make change on this specific instance we are using this element alot of places

Rounin Over a year ago

Sorry, I misunderstood your question. I have edited the post above to give the correct answer.

Collectives™ on Stack Overflow

How to structure selectors in css when using specificity?

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related