Czy mogę wybrać n-tą kolumnę?

Question

Mam div z 4 css columns i chciałbym wybrać trzecią i czwartą kolumnę, aby tekst był nieco ciemniejszy, ponieważ nie mam dobrego kontrastu między tekstem a background-image. czy to możliwe? Potrafię przyjąć dowolne rozwiązanie css lub js. To jest .

--EDIT--

Wydaje się, że to nie jest możliwe, aby znaleźć selektor pseudo bloków (jeśli mogę powiedzieć) jednak nadal muszę wymyślić sposób tworzenia elastycznych bloków (jak kolumny), które podzieli tekst tak samo (na szerokość), gdy zmieni się rozmiar przeglądarki.

Answer 1

O ile wiem, że nie będzie w stanie zastosować style do kolumn. Można jednak użyć gradientu jako tła, aby uczynić kolumny 3 i 4 innym kolorem.

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

updated jsFiddle na bieżąco z wszystkimi gradientu wsparcia przeglądarka

- EDIT -

Ponieważ intencją było rzeczywiście zmienić kolor tekstu, a nie tło dla trzeciej i czwartej kolumnie kilka dodatkowych myśli.

Na razie nie można stosować stylów do pojedynczych kolumn wewnątrz kontenera. Jednym możliwym obejściem zmiany koloru tekstu w określonych kolumnach jest umieszczenie każdego słowa wewnątrz span. Następnie użyj JavaScript do iteracji słów i ustalenia, gdzie zaczyna się nowa kolumna. Przypisując pierwszy element w trzeciej kolumnie, nowa klasa umożliwiałaby stylizowanie tego i następnych rodzeństwa na inny kolor tekstu.

Ponieważ kontener jest częścią elastycznego layoutu i może zmienić swój rozmiar, skrypt musiałby zostać ponownie uruchomiony na zdarzeniu zmiany rozmiaru w celu uwzględnienia zmiany szerokości kolumn.

Celem przykładowego kodu jest przedstawienie, w jaki sposób można wdrożyć takie rozwiązanie, i które powinno zostać udoskonalone do użytku w konkretnej aplikacji (np. s są ponownie tworzone za każdym razem, gdy uruchamiane jest styleCols, wiele wyników konsol. ..).

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; 
} 

jsFiddle

Answer 2

Na razie nie sądzę, że możesz to zrobić, tutaj https://bugzilla.mozilla.org/show_bug.cgi?id=371323 to otwarty błąd/żądanie dla funkcji, możesz głosować na nią. Do tego czasu możesz rozważyć użycie tabel.

P.S.

Give Up and Use Tables tylko ze względu na humor :)

Answer 3

Jedynym rozwiązaniem mogę myśleć byłoby tło z żądanym kolorem dla środkowej kolumny, dostosować go do rozmiar i pozycja, więc idzie za twoim środkowym colu mns i wykonaj background-clip:text. Niestety nie jest to obsługiwane bardzo dobrze. Możesz znaleźć więcej eksploracji here.