How can I use a CSS selector to match two classes being present?


Tags: html,css,css-selectors

Problem :

I have the following HTML:

<div class="form">
<input disabled="disabled" data-ng-model="dataId" type="text" />
<div class="disabled input-type-text">123</div>
</div>

I am trying to match the class of disabled and input-type-text. I tried the following but it does not work:

.form .input-type-text.disabled ,
.form input.disabled,
.form input:disabled,
.form select.disabled,
.form select:disabled,
.form textarea.disabled {
  color: #000000;
  background-color: #e6e6e6;
  border: 1px solid #adcede;
  opacity: 0.5;
}

Can someone give me some advice on how I can match with CSS selectors? Note that this does work for the <input> but not for the <div>



Solution :

The selector is correct:

.form .input-type-text.disabled {
    border: 1px solid #adcede;
    padding: 7px;
    margin: 7px 0 2px 0;
    line-height: 16px
}

The issue is that you don't close " in style attribute:

<div class="..." style="...ding: 7px; margin: 7px 0 2px 0; line-height: 16px></div>
<!--                                                        Here  ----------^ -->

    CSS Howto..

    How do I have a CSS classes priority be affected by what class it is “more closely” inside?

    How to make colspan work without affecting width of the other rows

    how to overwrite inline styles in print css?

    SF2 how to import css / js?

    how to build a triangular slider? [closed]

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to make changes in wordpress template. Css direct edit not working

    How to sharpen an image in CSS?

    How do I change this flipping card to rotate itself onclick?

    How to stack and hide images in a Div in order to animate between them (without floats)

    How to hide expand/collapse icon in vaadin treetable?

    How to neaten css shapes?

    Linkedin Follow Button not showing properly in Firefox

    How can I set different gradients as background, each time user refreshes?

    How to load local copy of bootstrap css when the cdn server is down?

    How to create a fixed menu (links come from right to left) - HTML & CSS

    How to Replace image in CSS background using jQuery?

    PHP/CSS how to keep my checkboxs from going past my border

    How to ensure each DIV appears on it's own without overlapping

    How to find out and get rid of unused CSS code? [closed]

    How to prevent a span from breaking into the next line - responsive webdesign?

    How to get messages column up on the right?

    How to mark up speedometer/gauge in HTML/CSS?

    How to center text in lists?

    Why css3 slideshow does not work

    How to turn off element CSS background when dragged

    How to detect single letters and modify their look/css

    how to add css style to dynamically loaded snippet using jquery ajax

    How to clear the bottom of an image like clear left / right

    CSS - How to make rectangle with pointed sides? [duplicate]