Pseudo Classes

CSS pseudo-classes are keywords added to selectors that specify special states of the element to be selected. For example, pseudo-class :hover will apply a style when user hovers over the element specified by the selector.

Some standard pseudo-classes have limited use because they get applied to specific elements only, and not to their ancestors. For example, a number of MVC input controls contain input elements. When input elements have the focus, they get the pseudo-class :focus, but the control host that contains it does not get the same.

To handle this, we added some pseudo-classes of our own to make it easier to build effective forms:

wj-state-focused: Added to control host elements when control contains the active element (not necessarily when the host element is the active element).
wj-state-invalid: Added to control host elements when control contains input elements in an invalid state.
wj-state-empty: Added to control host elements when control contains an input element with no content (this is different from the :empty pseudo-class which is applied to elements that have no children.
wj-state-readonly: Added to control host elements when isReadOnly property of control is set to true.
wj-state-disabled: Added to control host elements when isDisabled property of control is set to true (which corresponds to adding a "disabled" attribute to the control's host element).

This example shows how you can use the wj-state-focused pseudo-class to apply CSS animations to the thumb element of linear and radial gauges when they get the focus.

Click the gauges below to change the current value and watch how their respective thumbs change:

// This file locates: "Content/css/Lesson/C1Mvc/PseudoClasses.css".
.wj-gauge {
  width: 300px;
  margin: 20px auto;
}
 
.wj-gauge .wj-face path {
    fill: #d0d0d0;
    stroke: none;
}
.wj-gauge .wj-pointer path {
    fill: #404040;
    stroke: none;
}
.wj-gauge circle.wj-pointer {
    fill: #404040;
    stroke: none;
    transition: fill stroke .5s;
}
.wj-gauge.wj-state-focused circle.wj-pointer {
    fill: red;
    stroke: red;
    stroke-width: 10px;
    transition: fill stroke .5s;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: PseudoClasses
        public ActionResult PseudoClasses()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Text3)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Mvc.PseudoClasses_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Mvc.PseudoClasses_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1Mvc.PseudoClasses_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1Mvc.PseudoClasses_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1Mvc.PseudoClasses_Text8)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Text9)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.PseudoClasses_Text10)
</p>
 
@(Html.C1().RadialGauge().Id("theRadialGauge")
    .Value(50).Max(100).IsReadOnly(false).ThumbSize(6)
    .Face(f => f.Thickness(0.08))
    .Pointer(p => p.Thickness(0.08))
)
@(Html.C1().LinearGauge().Id("theLinearGauge")
    .Value(50).Max(100).IsReadOnly(false)
    .ThumbSize(10)
    .Face(f => f.Thickness(0.25))
    .Pointer(p => p.Thickness(0.25))
)