CODEWITHSUNDEEP
htmlcssangularjs
colymore
colymore

Reputation: 12316

Apply css style to child element of parent class

i need to aply a css for a input if his parent is a special class (closeorder) In this html:

<autocomplete id="items" placeholder="Buscar trabajos" pause="400" selectedobject="selectedObject" 
   url="http://localhost:801/categories/query/New Company/" 
   titlefield="type,code,name,price" descriptionfield="Categoria, Codigo, Nombre, Precio" 
   inputclass="form-control form-control-small selector closeoder" 
   class="ng-isolate-scope">
      <div class="input-group autocomplete-holder">
         <form ng-submit="submit()" class="ng-pristine ng-valid">
            <button data-toggle="tooltip" title="Añadir seleccion" class="btn btn-tr btn-link animated pulse- btn" style="color:#81BB31; font-size:20px;">
               <span class="input-group-addon glyphicon glyphicon-plus"></span>
            </button>
         </form>
         <input id="search_value" ng-model="searchStr" type="text" 
            placeholder="Buscar trabajos" class="selector ng-pristine ng-valid">
      </div>
</autocomplete>

The autocomplete element has inputclass closeorder, how can i set css to the input child?

I tried with this: 

autocomplete.closeorder > input {
    width: 88% !important;
}

but dont work..

Upvotes: 1

Views: 4230

Answers (2)

gkalpak
gkalpak

Reputation: 48212

For a complete list of CSS selectors take a look here.
Basically, you seem to need these two selectors:

E[foo~="bar"]
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E F
an F element descendant of an E element

The CSS rule should look like this:

autocomplete[inputclass~="closeoder"] input {
    ...
}

This reads: Select any input element that is a descendant of an autocomplete element whose "inputclass" attribute value is a list of whitespace-separated values, one of which is exactly equal to "closeorder".

See, also, this short demo.

(Using !important is rarely a good idea. Learn about CSS specificity and try to avoid !imporant as much as possible.)

Upvotes: 1

LOTUSMS
LOTUSMS

Reputation: 10240

A combination of a couple of errors. First remove inputclass and use class

Fix the typo to closeorder in the HTML

and finally use this CSS

.closeorder input[type="text"]{
    width: 88%;
}

The !important is not necessary and you should used the !important hack as least as possible.

See DEMO

Upvotes: 0

Related Questions