title: How can I apply a style to one element in a kendo dropdownlist?
body: <p>I'm currently experimenting with Kendo and I found this example online: </p>
  
  <p>Here's the code for ASP.NET MVC:</p>
  
  <pre><code>&lt;div class="demo-section"&gt;
  &lt;h2&gt;View Order Details&lt;/h2&gt;
  &lt;p&gt;
      &lt;label for="categories"&gt;Catergories:&lt;/label&gt;
      @(Html.Kendo().DropDownList()
            .Name("categories")
            .HtmlAttributes(new { style = "width:300px" })
            .OptionLabel("Select category...")
            .DataTextField("CategoryName")
            .DataValueField("CategoryId")
            .DataSource(source =&gt; {
                 source.Read(read =&gt; {
                     read.Action("GetCascadeCategories", "ComboBox");
                 });
            })
      )
     &lt;/p&gt;
     &lt;p&gt;
      &lt;label for="products"&gt;Products:&lt;/label&gt;
      @(Html.Kendo().DropDownList()
            .Name("products")
            .HtmlAttributes(new { style = "width:300px" })
            .OptionLabel("Select product...")
            .DataTextField("ProductName")
            .DataValueField("ProductID")
            .DataSource(source =&gt; {
                source.Read(read =&gt;
                {
                    read.Action("GetCascadeProducts", "ComboBox")
                        .Data("filterProducts");
                })
                .ServerFiltering(true);
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("categories")
      )
          &lt;script&gt;
          function filterProducts() {
              return {
                  categories: $("#categories").val()
              };
          }
      &lt;/script&gt;
       &lt;/p&gt;
       &lt;p&gt;
       &lt;label for="orders"&gt;Orders:&lt;/label&gt;
       @(Html.Kendo().DropDownList()
            .Name("orders")
            .HtmlAttributes(new { style = "width:300px" })
            .OptionLabel("Select order...")
            .DataTextField("ShipCity")
            .DataValueField("OrderID")
            .DataSource(source =&gt; {
                source.Read(read =&gt;
                {
                    read.Action("GetCascadeOrders", "ComboBox")
                        .Data("filterOrders");
                })
                .ServerFiltering(true);
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("products")
      )
      &lt;script&gt;
          function filterOrders() {
              return {
                  products: $("#filterOrders").val()
              };
          }
       &lt;/script&gt;
      &lt;/p&gt;
     &lt;/div&gt;
      &lt;script&gt;
      $(document).ready(function () {
      var categories = $("#categories").data("kendoDropDownList"),
          products = $("#products").data("kendoDropDownList"),
          orders = $("#orders").data("kendoDropDownList");
  
         $("#get").click(function () {
          var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
              productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
              orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";
  
          alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
      });
  });
  &lt;/script&gt;
  &lt;style scoped&gt;
  .demo-section {
      width: 460px;
      padding: 30px;
  }
  .demo-section h2 {
      text-transform: uppercase;
      font-size: 1.2em;
      margin-bottom: 30px;
  }
  .demo-section label {
      display: inline-block;
      width: 120px;
      padding-right: 5px;
      text-align: right;
  }
  .demo-section .k-button {
      margin: 20px 0 0 125px;
  }
  .k-readonly
  {
      color: gray;
  }
  </code></pre>
  
  <p></p>
  
  <p>Here's the website with the interactive demo and source code: 
  <a href="http://demos.telerik.com/kendo-ui/web/dropdownlist/cascadingdropdownlist.html" rel="nofollow">http://demos.telerik.com/kendo-ui/web/dropdownlist/cascadingdropdownlist.html</a></p>
  
  <p>I am wondering if I wanted the words "Select Category..." or "Select Product..." in that dropdownlist made to a font-style of Italics and only that element (The first element of the dropdownlist), how can I do that? </p>
  
  <p>Currently <code>.HtmlAttributes(new { style = "width:300px" })</code> (for example) would apply the styles to all the elements in the list. How can I make it only apply to one element in the list? </p>