How to Simplify These CSS Selectors

How can I simplify these CSS selectors?

If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:

.test:hover :is(h2, p) {
  text-decoration: underline;
}

<div class="test">
  <h1>An H1</h1>
  <h2>An H2</h2>
  <p>A paragraph</p>
</div>

Simplifying comma separated CSS selectors with common prefix/suffix

As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.

For this particular case, you could use a for-each loop.

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
  html:lang(qw) div[data-domain*='#{$domain}'] {
    display: none !important;
  }
}

This would result in the following CSS:

html:lang(qw) div[data-domain*='abc.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='def.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='ghi.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='jkl.com'] {
  display: none !important;
}

Howto simplify css rule with multiple class selectors for multiple elements

You can certainly use the universal selector (*) together with the child selector (>), as there is no other valid element besides th and td that could be inside a tr:

.simpleTable.cellBorders tr>* {
    border: 1px #ccc solid;
}

Note that putting another child selector between .simpleTable.cellBordersand tr will not work as expected, as browsers (at least Firefox) will add a tbody element between the table element and its tr elements, as defined by the HTML 4.01 standard as well as the HTML5 standard:

Tag omission in text/html:
A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not
immediately preceded by a tbody, thead, or tfoot element whose end tag
has been omitted. (It can't be omitted if the element is empty.)

How to simplify my CSS stylesheet?

A few things:

Don't use generic class names like div. There's already an element element called div. If you want to target it based on nesting, do so using CSS.

.table_name > div {} /* or .table_name div */

And not...

.table_name .div {}

Use specific selectors. Is there a reason why you need to go through table_name .div table input? Why not target the input specifically by giving it a class?

<input class="my_input">

And then:

.my_input {
  color: red;
}

Finally, it's up to you what style to use, but most people tend to use double quotes around html attributes. For example:

<div class="table_name"> and not <div class='table_name'>

simplify html css selectors in style sheet

To do this you would have to combine the CSS associated with the three separate CSS classes applied to your inputs into a single rule...

.form-control {
    /* form-control styles here */
}

.input-sm {
    /* input-sm styles here */
}

.text-right {
    /* text-right styles here */
}

would become...

input[id^="OP_CG"] {
    /* form-control styles here */
    /* input-sm styles here */
    /* text-right styles here */
}

Simplify css selectors with the same parent

With normal CSS you do not have a choice.

With CSS compilers like SASS or LESS you can write something like that:

.content {
    .p, ul, h1 {
        text-indent: 35px;
    }
}

I nowadays highly recommend using Compass which makes writing CSS so much more fun.

Howto simplify css rule with multiple class selectors for multiple elements

You can certainly use the universal selector (*) together with the child selector (>), as there is no other valid element besides th and td that could be inside a tr:

.simpleTable.cellBorders tr>* {
    border: 1px #ccc solid;
}

Note that putting another child selector between .simpleTable.cellBordersand tr will not work as expected, as browsers (at least Firefox) will add a tbody element between the table element and its tr elements, as defined by the HTML 4.01 standard as well as the HTML5 standard:

Tag omission in text/html:
A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not
immediately preceded by a tbody, thead, or tfoot element whose end tag
has been omitted. (It can't be omitted if the element is empty.)

How can I simplify these nth-child selectors? Possible patterns?

You can always simplify your selectors like this:

http://jsfiddle.net/VK6kE/2/

div {
    width:1em;height:1em;
    float:left;
    background:#ecf0f1;
    border:1px solid #3498db;
}
div:nth-child(10n+1), div:nth-child(10n+4), div:nth-child(10n+5), div:nth-child(10n+6), div:nth-child(10n+8) {
    background:#3498db;
    border:1px solid #ecf0f1;
}
body {width:1012px;}

What I did was:

• set the white-ish style as the default
• let the others override this style

This way you can eliminate 5 selectors without increasing code.

Also as posted by another user in comments (nicolallias) and as per the OP request, I will also add the way to shorten it with more javascript code:

for(var i = 0; i < 1000; i++){
    switch(i%10){
        case 1:
        case 4:
        case 5:
        case 6:
        case 8:
            $('body').prepend('<div class="one"></div>'); break;
        case 2:
        case 3:
        case 7:
        case 9:
        case 0:
            $('body').prepend('<div class="two"></div>'); break;
    }
}

.one {
    background:#3498db;
    border:1px solid #ecf0f1;
}
.two {
    background:#ecf0f1;
    border:1px solid #3498db;
}

How to simplify CSS code

Based on the posted HTML I'd suggest following changes:

The inner classes apl_widget_label and apl_widget_value are unnecessary and can simply replaced with unique elements (that is unique within the li). This may make the selectors slightly longer, but much better structured and more readable. Also the div around the link is unnecessary as the link can be styled directly.

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div>Level </div><a href="#">1</a>
    </li>
   ...

with

.apl_widget_content li div {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.apl_widget_content li.selected div {
    padding-top: 15px;
}
.apl_widget_content li a {
    font-size:24px;
    margin-top:10px;
    text-decoration:none;
    color:#FFF;
    display: block;
}
.apl_widget_content li.selected a {
    margin-top:15px;
}

You also can move the top, width and height properties in the level rules to the ul.apl_widget_content li(.selected) rules:

ul.apl_widget_content li {
   ...
   top: 0px;
   width: 86px; 
   height: 133px;
}

ul.apl_widget_content li.selected {
    width:102px; 
}

#apl_widget_level1 {
    background-position: -13px -300px;
}

It would be great if you could get rid of the "selected level" IDs (the ones ending with s), but I can't think of a reasonable way which still supports IE6.

I just see that you have set the li to display: inline while keeping block elements insde them. You'll need to be careful with that, because despite being technical correct CSS its exact rendering is not really defined. You may consider display: inline-block or float: left instead.

---

Related Topics