クラスセレクターと属性セレクターをjQueryと組み合わせる

クラスセレクターと属性セレクターの両方をjQuery と組み合わせることが可能ですか？

たとえば、次のHTMLがあるとします。

<TABLE>
  <TR class="myclass" reference="12345"><TD>Row 1</TD></TR>
  <TR class="otherclass" reference="12345"><TD>Row 2</TD></TR>
  <TR class="myclass" reference="12345"><TD>Row 3</TD></TR>
  <TR class="myclass" reference="54321"><TD>Row 4</TD></TR>
</TABLE>

行1と3のみを選択するために使用できるセレクターは何ですか？

私が試してみました：

$(".myclass [reference=12345]") // returns nothing

$(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means 'or')

答えは非常に単純で、jQueryフォーラムとドキュメントを検索してみましたが、これを理解することはできません。誰か助けてもらえますか？

それらを組み合わせる。文字通りそれらを組み合わせる。句読点なしでそれらを一緒に添付します。

$('.myclass[reference="12345"]')

最初のセレクターは、クラスの要素に含まれる属性値を持つ要素を探します。
スペースは子孫セレクターとして解釈されています。

2番目のセレクターは、あなたが言ったように、属性値またはクラス、あるいはその両方を持つ要素を探します。
コンマは、複数のセレクター演算子として解釈されます。つまり、CSSセレクターには「演算子」という概念はありません。コンマはおそらく区切り文字としてより正確に知られています）。

スペースを削除するだけでいいと思います。すなわち

$(".myclass[reference=12345]").css('border', '#000 solid 1px');

ここにフィドルがありますhttp://jsfiddle.net/xXEHY/

このコードも機能します：

$("input[reference=12345].myclass").css('border', '#000 solid 1px');

これも機能します：

$(".myclass[reference='12345']").css('border', '#000 solid 1px');