最後に表示されている擬似要素12pxを左に移動

Question

最後に表示されている擬似要素12pxを左に移動したいとします。

document.styleSheets[0].addRule('.dataTable thead tr th.sorting:before', 'right: 12px;'); 

私はjQueryのfind(':visible:last')ようなものが必要：このルールは、すべての可視擬似要素は左に12ピクセル移動します。他のアプローチも歓迎されます。

http://jsfiddle.net/mmushtaq/2qpgjw0b/

Answer 1

あなたはすべての可視要素を選択し、未亡人のサイズを変更する際のロジックを適用するためにjQueryを使用することができます。あなたはこのよう:not()でstyleに属性セレクタを使用できるように見える要素は、そのスタイルにdisplay:noneを持っていないお気づきのように：

$('.dataTable thead tr th.sorting:not([style*=none])').last() 

あなたはスタイルでnoneことなく、すべての要素を選択して.last()を使用します最後のものだけを取得する。しかし、jQueryでは:after要素を操作することができないので、この要素に特定のクラスを追加し、CSSを使用して擬似要素にスタイルを適用することができます。だからあなたのコードは次のようになります。

：ここ

$(window).resize(function() { 
 
    /*Remove the class from the previous element */ 
 
    $('.special').removeClass('special'); 
 

 
    /*Add the class to only the last visible element*/ 
 
    $('.dataTable thead tr th.sorting:not([style*=none])').last().addClass('special'); 
 
})

.special:after { 
 
    right: 15px; 
 
}

私は最後vsibile要素（表示するには、ウィンドウのサイズを変更）の色を変更する実施例でありますhttp://jsfiddle.net/2qpgjw0b/5/