var slice = Array.prototype.slice,
filter = Array.prototype.filter
;
function findSelector(cssProperty){
var rules = [];
filter
.call(document.styleSheets, hasRules)
.forEach(function(styleSheet){
rules = rules.concat(slice
.call(styleSheet.rules)
.filter(hasCssNameDelegate(cssProperty))
);
})
return rules.map(function(rule){
return {
selector: rule.selectorText,
value: rule.style[cssProperty]
};
});
function hasRules(styleSheets){
return styleSheets.rules != null
}
function hasCssNameDelegate(name) {
return function(cssRule){
return cssRule.style && slice.call(cssRule.style).indexOf(name) !== -1
};
}
}
function findSelectorForElement(element, cssProperty){
var matchesSelector = HTMLElement.prototype.webkitMatchesSelector
|| HTMLElement.prototype.mozMatchesSelector
|| HTMLElement.prototype.msMatchesSelector
|| HTMLElement.prototype.oMatchesSelector
;
return findSelector(cssProperty)
.filter(function(data){
return matchesSelector.call(element, data.selector);
}).slice(-1)[0];
}
var tosterSidebar = document.querySelector('.sidebar')
findSelectorForElement(tosterSidebar, 'width');var FILE = 'menu.less',
SELECTOR = '.icon-hh:hover::before';
var sheets = document.styleSheets,
sheet,
i = 0,
imax = sheets.length,
rule;
for (; i < imax; i++) {
sheet = sheets[i];
if (sheet.href && sheet.href.indexOf(FILE) !== -1)
break;
}
if (i === imax)
throw new Error('File Not Found');
i = 0;
imax = sheet.cssRules.length;
for (; i < imax; i++) {
rule = sheet.cssRules[i];
if (rule.selectorText === SELECTOR)
break;
}
if (i === imax)
throw new Error('Selector Not Found');
rule.style.background = 'green';
Селекторы с динамическими именами противоречат смыслу CSS.Но создавать правила css через javascript последние браузеры нам разрешают. В результате: jsfiddle.
.replies-summary>div{float:none; display:table-cell; white-space:nowrap;}
.replies-summary>div:nth-child(3){ width:100%; text-align:right; font-size:3em;}
html, body{margin:0; height:100%;}. И все потому, что высота будет 0, а overflow:hidden скроет все что за контейнером (но если бы мы не указали контейнеру position:relative;, то абсолютные дивы позиционировались в body и были бы видны). Если вам все же надо, что бы контейнер подстраивался под детей, то абсолютное позиционирование не подойдет. Вам бы поподробнее описать проблему и желаемый результат.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type='text/css'>
body > div {
width:400px;
}
.row {
display:table-row;
}
.row input[type=text]{
width:100%;
}
.row div:first-child {
display:table-cell; white-space:nowrap;
}
.row div:nth-child(2){
display:table-cell;
width:100%;
padding-right:4px;
}
.row div:nth-child(3){
width:40px;
}
</style>
</head>
<body>
<div>
<div class='row'>
<div>Floating size</div>
<div>
<input type='text'/>
</div>
<div>40px;</div>
</div>
</div>
<div>
<div class='row'>
<div>Really Floating size</div>
<div>
<input type='text'/>
</div>
<div>40px;</div>
</div>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.