How to structure selectors in css when using specificity?


Tags: css,css3

Problem :

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


Solution :

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 }

    CSS Howto..

    How can I get an element to stay within the browser's window width when its content is wider?

    Show/Hide images based on tab selection

    How to add CSS AnimationEnd event handler to GWT widget?

    how to pass jquery variable value into css property value?

    How do you align left / right a div without using float?

    How to control the css for two instance of Google Maps autocomplete on the same page?

    How to give a div full height in CSS

    How to fix this common problem of position:fixed elements not expanding to its parent width?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    how to change element css class runtime using javascript

    How to achieve this layout with div and css?

    How to get tr:nth-child which has css applied

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How can i Convert left vertical menu to right?

    How to keep text in textfield even after focus and remove on key press?

    BeautifulSoup4/CSS selector how to select the

    Primefaces p:growl css. How to extend div message background color width

    How to use jQuery to read/write the values of an elements externally defined css class?

    How to edit 'clip' CSS property in JQuery?

    How to make a div act as an infinite background

    How to set height to wrap text only in certain screen size

    How do I style a div with inner floats to expand horizontally to allow all inner floating divs to fit?

    How to access dynamic controls having same properties in the Javascript

    How to make all borders the same color?

    How can I change using jekyll bootstrap navbar colour?

    How to get background img to show up in :after selector?

    How do I make the mobile view of my website not show certain elements?

    jQuery to hide and show divs with an indicator

    How to achieve this bevel button in CSS?

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?