borderの優先度

公開日: 2024/12/01

カテゴリ: CSS

CSSでborder-collapseを指定した際の重なりの優先度について、意外とはっきり記載されたページが見当たらないので調べてみました。

TL;DR

上から順番に優先度が高くなります。

border-style: hidden;
線の幅(border-width)による優先度
- 太い線が優先(border-style: hidden/noneの線幅は0扱い)
線のスタイル(border-style)による優先度(hiddenを除く)
- double > solid > dashed > dotted までは共通、以降はブラウザによって差異あり
  - Chrome: ridge=inset > groove=outset > none
  - Firefox/Safari: ridge > outset > groove > inset > none
要素による優先度
- 親子関係では子要素、兄弟関係では兄要素が優先

要素による優先度

一般的な親子関係でテーブルを構築しているものとします。

(<table> > <thead><tbody><tfoot> > <tr> > <th><td> の想定)

THとTD

<th>に赤、<td>に黒を指定

結果: 同列(左上セルのborderを優先)

TRとTD

<tr>に赤、<td>に黒を指定

結果: <td> > <tr>

THEAD/TBODY/TFOOTとTR

<thead><tbody><tfoot>に赤、<tr>に黒を指定

結果: <tr> > <thead><tbody>

THEADとTBODYとTFOOT

<thead>に赤、<tbody>に黒、<tfoot>に緑を指定

結果: <thead> > <tbody> > <tfoot> (おそらく同列で上の行を優先している)

TABLEとTHEAD/TBODY/TFOOT

<table>に赤、<thead><tbody><tfoot>に黒を指定

結果: <thead><tbody><tfoot> > <table>

まとめ

優先度が高い順に以下となりました。基本的に親子関係では子要素のborderが優先され、兄弟関係では兄要素のborderが優先されるようです。

<th><td> > <tr> > <thead> >= <tbody> >= <tfoot> > <table>

border-styleの優先度

1つずつ調べるのは面倒なので、JSで適当に並べて動的に変化させながら調べます。

それぞれの枠の色は、そのセルの文字色と一致します。上下の線が同じ色の場合は、その色のセルのスタイルが優先されていることになります。上下で色が異なる場合は同じ優先度になっていて、上述の要素による優先度で表示されたことになります。

結果

ブラウザによって差異があります(9:00追記)。

Chrome

hidden > double > solid > dashed > dotted > ridge=inset > groove=outset > none

Firefox / Safari

hidden > double > solid > dashed > dotted > ridge > outset > groove > inset > none

border-widthの優先度

上下のセルに2px solid、中央のセルに1px doubleを指定

結果: 太い線が優先(細い方に太い方よりも優先されるスタイルを指定しても太い方が優先される)

非表示スタイルの優先度

hidden

上下のセルに2px solid、中央のセルに1px hiddenを指定

結果: border-style: hidden;が優先

none

上下のセルに1px solid、中央のセルに3px noneを指定

結果: border-widthは0とみなされる

結論