syntax for css selector class attribute combination

Question

I have bunch of elements with class X.

some elements have class Y also (ie both X and Y)

how do I select set of elements only have X with partial class name?

below is my example HTML

<td class="dxeCalendarDay_Office2010Blue dxeCalendarOtherMonth_Office2010Blue" savedcursor="[object Object]" style="cursor: pointer;">29</td>

<td class="dxeCalendarDay_Office2010Blue" savedcursor="[object Object]" style="cursor: pointer;">4</td>

I could select all of them using

By.cssSelector("[class^='dxeCalendarDay']");

The class prefix "_Office2010Blue" will change at run time

But I need to exclude elements which having "dxeCalendarOtherMonth..."

probably something like.....

 By.cssSelector("[class^='dxeCalendarDay'].Not:([class*='dxeCalendarOtherMonth'])");

what is the correct syntax?

Answer 1

Assume you want to take all the elements having class X but having no class Y. Then your code will look like:

By.cssSelector(".x:not(.y)")

For example for the below html:

<div>
  <div class="x y">xy</div>
  <div class="x y z">xyz</div>
  <div class="x z">xz</div>
  <div class="x">x</div>
</div>

The mentioned selector will select xz and x.

Answer 2

Why not just select:

By.cssSelector('[class="X"]');

This will simply exclude the "Y" class objects without any NOT operators assuming there are NO "Z" class objects in the picture.

Answer 3

The simplest solution is perhaps selecting class X straight away:

• By.cssSelector("[class='dxeCalendarDay_Office2010Blue dxeCalendarOtherMonth_Office2010Blue']");

Alternatively, you can go with select a class that ends with syntax:

• By.cssSelector("[class$='dxeCalendarOtherMonth_Office2010Blue']");