javascript - n番目のcss列を選択できますか?

Question

私はdiv4 つの CSSを持っています。columnsテキストとbackground-image. これは可能ですか？css または js ソリューションを受け入れることができます。

これがデモです。

- 編集 -

疑似ブロックのセレクターを見つけることはできないようですが(私が言うかもしれませんが)、ブラウザーが常に (幅で) テキストを均等に分割するレスポンシブ ブロック (列など) を作成する方法を理解する必要があります。サイズ変更しました。

Answer 1

私の知る限り、列にスタイルを適用することはできません。ただし、グラデーションを背景として使用して、列 3 と 4 を別の色にすることができます。

#columns {
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
    /*... appropriate css for other browser engines*/
}

更新された jsFiddle は、すべてのブラウザー サポート グラデーションで更新されました

- 編集 -

実際には、3 列目と 4 列目の背景ではなく、テキストの色を変更することが意図されていたため、追加の考えがいくつかあります。

今のところ、コンテナ内の単一の列にスタイルを適用することはできないようです。特定の列のテキストの色を変更するための 1 つの可能な回避策は、すべての単語をspan. 次に、JavaScript を使用して単語を繰り返し処理し、新しい列の開始位置を決定します。3 列目の最初の要素に新しいクラスを割り当てると、これと次の兄弟を異なるテキスト色でスタイル設定できます。

コンテナーはレスポンシブ レイアウトの一部であり、サイズが変更される可能性があるため、列幅の変更を考慮してサイズ変更イベントでスクリプトを再実行する必要があります。

コード例の目的は、そのようなソリューションを実装する方法を概説することであり、実際のアプリケーションで使用するために改善する必要があります (たとえば、が実行spanされるたびに s が再作成されstyleCols、多くのコンソール出力が表示されます...)。

JavaScript

function styleCols() {
    // get #columns
    var columns = document.getElementById('columns');
    // split the text into words
    var words = columns.innerText.split(' ');
    // remove the text from #columns
    columns.innerText = '';

    // readd the text to #columns with one span per word
    var spans = []
    for (var i=0;i<words.length;i++) {
        var span = document.createElement('span');
        span.innerText = words[i] + ' ';
        spans.push(span);
        columns.appendChild(span);
    }

    // offset of the previous word
    var prev = null;
    // offset of the column
    var colStart = null;
    // number of the column
    var colCount = 0;
    // first element with a specific offset
    var firsts = [];
    // loop through the spans
    for (var i=0;i<spans.length;i++) {
        var first = false;
        var oL = spans[i].offsetLeft;
        console.info(spans[i].innerText, oL);
        // test if this is the first span with this offset
        if (firsts[oL] === undefined) {
            console.info('-- first');
            // add span to firsts
            firsts[oL] = spans[i];
            first = true;
        }
        // if the offset is smaller or equal to the previous offset this
        // is a new line
        // if the offset is also greater than the column offset we are in
        // (the second row of) a new column
        if ((prev === null || oL <= prev) && (colStart === null || oL > colStart)) {
            console.info('-- col++', colCount + 1);
            // update the column offset
            colStart = oL;
            // raise the column count
            colCount++;
        }
        // if we have reached the third column
        if (colCount == 3) {
            // add our new class to the first span with the column offset
            // (this is the first span in the current column
            firsts[oL].classList.add('first-in-col3');
            return;
        }
        // update prev to reflect the current offset
        prev = oL;
    }
}
styleCols();
addEventListener('resize', styleCols, false);

CSS

.first-in-col3, .first-in-col3~span {
    color: red;
}

jsフィドル

Answer 2

今のところ、あなたにはできないと思います。https://bugzilla.mozilla.org/show_bug.cgi?id=371323は未解決のバグ/機能のリクエストです。投票できます。それまでは、テーブルの使用を検討できます。

PS

あきらめて、ユーモアのためだけにテーブルを使用してください :)

Answer 3

私が考えることができる唯一の解決策は、中央の列に希望の色の背景を付け、サイズと位置をカスタマイズして、中央の列の後ろに配置し、background-clip:text. 残念ながら、あまりサポートされていません。詳細については、こちらを参照してください。