css selector for first element inside a div

Question

I am new to CSS and have to style a <span> which is this situation:

<div class="ui-select-container ui-select-bootstrap dropdown ng-valid ng-touched ng-dirty ng-valid-parse">
  <div class="ui-select-match">
    <span class="btn btn-default form-control ui-select-toggle"></span>
  </div>
</div>

How to target the <span> to change its width? I tried this:

div .ui-select-container > span .class ui-select-toggle{
  width: 60%;
}

Please let me know where I am going wrong.

Answer 1

Try this

    div > .ui-select-match > span {
     width:60%;
     display:block;
}

hope will help

Answer 2

Try the following CSS:

.ui-select-container.ui-select-bootstrap.dropdown.ng-valid.ng-touched.ng-dirty.ng-valid-parse > .ui-select-match > span.ui-select-toggle {
    width: 60%;
}

Here's a fiddle: https://jsfiddle.net/7geurhvL/1/

It looks as though you were targeting the wrong child selector for the span... In addition, you don't need to specify the word class when declaring a CSS style, just need to use the following: span.ui-select-toggle

The . denotes the classname...

Answer 3

You are targenting a div element that have a child with class ui-select-container a direct children span and a child of type ui-select-toggle with class class.

You don't want this.

Space are importants if you want to target a span with a class you must write them without any space, a space mean child of and don't forget the point to target a class.

Try:

div.ui-select-container span.ui-select-toggle{
  width: 60%;
}

or alternatively:

div.ui-select-container > div.ui-select-match > span.ui-select-toggle{
  width: 60%;
}

More details here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 4

Use like this it will work

  .ui-select-container .ui-select-toggle {
   width: 60%;
 }

check this link https://css-tricks.com/child-and-sibling-selectors/