Soweit ich weiß, dass Sie nicht in der Lage sein, Stile zu den Spalten anwenden. Sie können jedoch versuchen, einen Farbverlauf als Hintergrund zu verwenden, um den Spalten 3 und 4 eine andere Farbe zu geben.
#columns {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
/*... appropriate css for other browser engines*/
}
updated jsFiddle mit all Browser-Unterstützung Gradienten aktualisiert
- EDIT -
Da die Absicht tatsächlich die Textfarbe und nicht den Hintergrund für die dritte und vierte Spalte zu ändern war einige zusätzliche Gedanken.
Momentan scheint es nicht möglich, Stile auf einzelne Spalten innerhalb eines Containers anzuwenden. Eine mögliche Problemumgehung, um die Textfarbe in bestimmten Spalten zu ändern, besteht darin, jedes Wort innerhalb eines span zu setzen. Dann verwenden Sie JavaScript, um über die Wörter zu iterieren und festzustellen, wo eine neue Spalte beginnt. Wenn Sie dem ersten Element in der dritten Spalte eine neue Klasse zuweisen, können Sie dieses und die folgenden Geschwister mit einer anderen Textfarbe formatieren.
Da der Container Teil eines Responsive-Layouts ist und seine Größe ändern kann, müsste das Skript für das Resize-Ereignis erneut ausgeführt werden, um die Spaltenbreiten zu berücksichtigen.
Der Zweck des Codebeispiel ist zu erläutern, wie eine solche Lösung zu implementieren und sollten für die Verwendung in einer tatsächlichen Anwendung verbessert werden (zB die span s styleCols ausgeführt wird jedes Mal neu erstellt werden, viele Konsolenausgabe. ..).
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
so weit ich weiß, gibt es keine Möglichkeit, das zu tun – Luca
Es gibt nicht (* [noch] (http://dev.w3.org/csswg/selectors4/#nth-column-pseudo) *) ein implementiertes Mittel, um dies zu tun. –
@David dachte ich mir. Deshalb versuche ich herauszufinden, wie ich das mit js machen kann. Auch wenn das Skript andere Blöcke als CSS-Spalten erstellt. – otinanai