CSS 2クロスブラウザサポートを使用してHTMLを変更せずに2番目の内部divを選択する方法はありますか?
<div>
<table>
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
</table>
</div>
CSS 2クロスブラウザサポートを使用してHTMLを変更せずに2番目の内部divを選択する方法はありますか?
<div>
<table>
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
</table>
</div>
隣接セレクターを使用できます
div + div
http://jsfiddle.net/kudoslabs/rysys/
参照:http ://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
このセレクターを試してみてください。どれでもうまくいきます:
div table div { ... }
また
div table tr td div { ... }
$("div div:nth-child(2)").css ( "CSS GOES HERE" ); // index starts from 1
$("div div:eq(1)").css ( "CSS GOES HERE" );; // index starts from 0
これは、ブラウザーが css3 をサポートしているかどうかに関係なく、すべてのブラウザーで機能します。
編集
前述のように、ブラウザーがcss2のみをサポートしている場合でも上記のコードは機能しますが、パズルのみの場合は
div div:first-child + div
これは、css3 を使用せずにメイン div 内の2 番目の div のみに影響します。[最初の子は css3 ではありません]
このセレクターを使用してみてください
div div + div {
…
}
これらの css ルールでこの結果を達成します。
div {
padding: 5px;
background: yellow;
}
div div + div {
background: red;
}
jqueryセレクターを使用して内部divを見つけようとしている場合は、次のコードが役立ちます
var innerDiv = $('table').find('div');
そしてアウター用
var outerDiv = $('table').parents('div');
よろしく。