CSS の「>」はどういう意味ですか? [重複] 質問する

2024-07-06 • tag-icon

重複の可能性あり:
CSS ルールにおける「>」はどういう意味ですか?

CSS の記号はどういう>意味ですか?Wordpress ブログのテーマでこの記号に気づいたのですが、何をしているのか知りたいです。

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}
#access ul li:hover > ul {
    display: block;
}

ベストアンサー1

これは、「最初のネストされた」要素（「子」要素）のみが対象になることを意味します。たとえば、

   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

もしあなたが書くなら

#a div{
 background: red;
}

すると、#bと#cは両方とも赤になりますが、>のように使用すると

#a > div{
 background: red;
}

そうすると、#b のみが赤くなり、#c は赤くなりません。

ベストアンサー1

おすすめ記事