さてjQueryは大雑把に言ってxhtmlとcssの操作をするというものだと前回いいましたが、これらの操作が実に簡単にできるのがjQueryの肝です。そもそもスタティックなファイルに対して一時的な変更を加えるわけなのですが、では「どの要素にどんな変更を加えるのか？」という意味ではその要素に対してアクセスしなくてはなりません。今回はそのアクセス方法を説明します。

• CSSに要素セレクタ（xhtmlタグ）でアクセスする
• CSSにIDセレクタでアクセスする
• CSSにクラスセレクタでアクセスする
• CSSにクラスセレクタから子要素セレクタでアクセスする
• CSSに隣接セレクタでアクセスする
• その他のアクセス方法
  

CSSに要素セレクタでアクセスする

　CSSの記述は通常、

p {
    color:#000000;
    font-size:12px;
}

のように記述されています。jQueryでも同様の方法でxhtmlタグにアクセスしそのタグに指定されているCSSを操作することができます。CSSでは上記の例の「p」タグのことを「セレクタ」と呼びます。
xhtmlソース

<p>この要素のスタイルが変化します。</p>

CSSのコード

p {
    color:#000000;
    font-size:12px;
}

というように記述されていた場合は、

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("p").css("color","#ff0000");
    })
</script>

という風に記述することができます。この場合は黒だったpタグの文字が赤に変化します。
文法的には、

<要素セレクタ> {
    <プロパティー>:<値>;
}

が、

$("<要素セレクタ>").css("<プロパティー>","<値>");

という風になっています。
　この方法でどんなセレクタにでもアクセスが可能であり、プロパティーと値を変化させることが可能です。

CSSにIDセレクタでアクセスする

　CSSは大変複雑な記述ができるのはいうまでもありませんが、CSSではごく頻繁にIDを利用することがあります。これは上記のセレクタをさらに細かく個々の要素にアクセスできるようにしたものです。jQueryもまた同様にIDでアクセスが可能です。
xhtmlソース

<p id="#sample">この要素のスタイルが変化します。</p>

CSSのコード

#sample {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("#sample").css("color","#ff0000");
    })
</script>

文法的には、

#<IDセレクタ> {
    <プロパティー>:<値>;
}

が、

$("#<IDセレクタ>").css("<プロパティー>","<値>");

という風になっています。

複数のIDセレクタにアクセスする

　複数のIDにアクセスしたい場合はカンマ切りで複数指定することも可能です。
xhtmlソース

<p id="sample1">この要素のスタイルが変化します。</p>
<p id="sample2">この要素のスタイルが変化しません。</p>
<p id="sample3">この要素のスタイルが変化します。</p>
<p id="sample4">この要素のスタイルが変化しません。</p>

CSSのコード

#sample1, #sample2, #sample3, #sample4 {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("#sample1,#sample3").css("color","#ff0000");
    })
</script>

文法的には、

#<IDセレクタ>,#<IDセレクタ>,#<IDセレクタ>,... {
    <プロパティー>:<値>;
}

が、

$("#<IDセレクタ>,#<IDセレクタ>,#<IDセレクタ>,...").css("<プロパティー>","<値>");

という風になっています。

CSSにクラスセレクタでアクセスする

　当然ここまでくるとCSSにクラスでアクセスできるというのは予想済み...だと思います。クラスもIDと同様に個々のセレクタに対して詳細にアクセスする方法の一つです。
xhtmlソース

<p class="sample">この要素のスタイルが変化します。</p>

CSSのコード

.sample { /*または、p.sampleと書きますが...*/
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $(".sample").css("color","#ff0000");
    })
</script>

文法的には、

.<クラスセレクタ> {
    <プロパティー>:<値>;
}

が、

$(".<クラスセレクタ>").css("<プロパティー>","<値>");

という風になっています。

複数のクラスセレクタにアクセスする

　殆ど説明の余地がないと思われますが、IDと同様に複数のクラスセレクタにもアクセスできます。カンマ切りで複数並べるだけです。
xhtmlソース

<p class="sample1">この要素のスタイルが変化します。</p>
<p class="sample2">この要素のスタイルが変化しません。</p>
<p class="sample3">この要素のスタイルが変化します。</p>
<p class="sample4">この要素のスタイルが変化しません。</p>

CSSのコード

.sample1, .sample2, .sample3, .sample4 {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $(".sample1,.sample3").css("color","#ff0000");
    })
</script>

文法的には、

.<クラスセレクタ>,.<クラスセレクタ>,.<クラスセレクタ>,... {
    <プロパティー>:<値>;
}

が、

$(".<クラスセレクタ>,.<クラスセレクタ>,.<クラスセレクタ>,...").css("<プロパティー>","<値>");

という風になっています。

CSSに子セレクタでアクセスする

　CSSはxhtmlがネスト構造（入れ子の構造）をしているということから、子セレクタという概念があります。これは親要素であるセレクタにネストされた子セレクタのみにCSSを摘要するというもので大変便利です。jQueryもその方法でアクセスすることができます。
xhtmlソース

<p><span>この要素のスタイルが変化します。</span></p>

CSSのコード

p span {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("p span").css("color","#ff0000");
    })
</script>

文法的には、

<親要素セレクタ> <子要素セレクタ> {
    <プロパティー>:<値>;
}

が、

$("<親要素セレクタ> <子要素セレクタ>").css("<プロパティー>","<値>");

という風になっています。またCSS2（IE6が対応していない）では同様の機能を

$("<親要素セレクタ> > <子要素セレクタ>").css("<プロパティー>","<値>");

というように「>」の要素を加えて記述することもできます。

CSSにクラスセレクタから子要素セレクタでアクセスする

　何となくここまでくるともう説明するのも不毛という気がしてきますが、一応。。。
xhtmlソース

<p class="sample"><span>この要素のスタイルが変化します。</span></p>

CSSのコード

.sample span {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $(".sample span").css("color","#ff0000");
    })
</script>

文法的には、

.<クラスセレクタ> <子要素セレクタ> {
    <プロパティー>:<値>;
}

が、

$(".<クラスセレクタ> <子要素セレクタ>").css("<プロパティー>","<値>");

という風になっています。これも同様にCSS2では「>」を利用して、

$(".<クラスセレクタ> > <子要素セレクタ>").css("<プロパティー>","<値>");

と書くこともできます。

CSSで隣接セレクタにアクセスする

　こんなことができるんですね。指定したセレクタの次に出現する要素セレクタにアクセスすることができます。
xhtmlソース

<ul>
    <li id="sample">項目1</li>
    <li id="sample2">項目2</li>
    <li>項目3</li>
    <li>項目4</li>
</ul>

CSSのコード

li {
    color:#000000;
    font-size:12px;
}

　このような場合はjQueryの記述は以下のようになります。

<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
        $("#sample2 + li").css("color","#ff0000");
    })
</script>

$("#<IDセレクタ> + <次の要素セレクタ>").css("<プロパティー>","<値>");

という風になっています。この場合は、2つめのli要素に付加されたID(#sample2)の次にくるli要素セレクタにアクセスすることになります。リストの3行目が赤くなります。

その他のアクセス方法

　セレクタへのアクセス方法は実に詳細な方法がjQueryには揃っています。擬似クラスなんかにも簡単にアクセスできます。ここでは割愛しますがCSS3での間接セレクタ、擬似クラスの:first-child、またその否定の:not(:first-child)、empty擬似クラス(:empty)、nth-child擬似クラス(:nth-child(番号))、last-child擬似クラス(:last-child)、only-child擬似クラス(:only-child)などがあります。