Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The answer depends entirely on your markup. First of all, if you're already using ID, you don't need to qualify that with an element name or a class name, since only one element may have that ID. So <code>form#finche-node-form</code> is the same thing as <code>#fince-node-form</code>, given that there will never be an element of that ID that is not a form.</p> <p><code>#finche-node-form.node-form</code> makes sense if you only want to apply the styles when the form has that class, and perhaps another style when it has another class. However, if your form will always have that class, or if you always want to apply that style to the form, regardless of whether it has that class, you can do with only <code>#finche-node-form</code>.</p> <p>The rest of your code selects 8 different input fields. The same thing can be said about them. <code>#input#edit-field-address-und-6-name.form-text</code> can probably safely be reduced to <code>#edit-field-address-und-6-name</code>.</p> <p>Now, the real space saver would be if you could find a way to target all 8 fields, without writing a separate selector for each, which is what you have here. That depends entirely on what your markup looks like. If these 8 fields happen to be your only input fields in the form, perhaps you can do with <code>#finche-node-form input</code>. Or else, if there are other elements, but only these 8 have the <code>form-text</code> class, then you could do with <code>#finche-node-form .form-text</code>.</p> <p>If what you want to do is actually to apply this style to <em>all</em> instances of <code>.form-text</code> then you could simply write</p> <pre><code>.form-text { width: 493px; } </code></pre> <p>So it all comes down to what your <em>actual</em> requirements are. There is not a single piece of that great long selector you've pasted that we can <em>know</em> to be safe to remove. There's a great deal we can <em>assume</em> will be safe, but only you can know what parts of the markup will be able to vary, and how you want your style to behave when it does.</p> <p>Your selectors should express your intent. Your current selector makes the reader think that you want to target only a specific subset of elements, only within a specific form, and that the style should not always be applied but only in the perhaps rare condition where the form has a certain class, and the inputs have another certain class. If that actually is your intent, then perhaps the current selector isn't that bad. You should probably stop and think over things when your CSS selector makes the code more verbose than adding the style inline (although still easier to change, so hey).</p> <p>If what you want to convey to the reader of your code (another developer or a browser) was really just "hey, I only want to make sure that all inputs in this form have this width", then that's what your selector should express.</p> <p><strong>Update</strong></p> <p>OK, now that we've seen your complete CSS code, we can verify that there are several different instances of <code>.form-text</code> that have different styles, so applying a single style to all elements of that class is obviously out of the question.</p> <p>Some other questions:</p> <ul> <li>Is <code>#finch-node-form</code> ever anything other than a form? Otherwise you may remove the initial <code>form</code> part of the selector from every selector.</li> <li>Does it ever happen that <code>#finch-node-form</code> does <em>not</em> have the class <code>node-form</code>? If not, you may remove <code>.node-form</code> from all selectors.</li> <li>Are there any <code>&lt;div&gt;</code> elements in the form that should ever <em>not</em> have the float and margin? If not, you may reduce that entire last selector to <code>form#finche-node-form.node-form div</code> or perhaps <code>#finche-node-form div</code>. <ul> <li>If yes, is there anything else that is unique to the <code>div</code> fields where you do want to apply this style? For instance, if there are many <code>div</code>s, but the ones targeted in the above selector are <em>only</em> the ones that are immediate children of that form, and there are <em>no</em> other <code>div</code>s that are, you would be able to write <code>#finche-node-form &gt; div { ... }</code></li> </ul></li> <li>Is there anything that combines all 493px-textfields, and at the same time differentiates them from all 100px, 362px or 352px fields? Anything at all? If so, we may be able to target that <code>#finche-node-form &gt; div:first-child &gt; .form-text { ... }</code> (for instance).</li> </ul> <p>Most important of all: <strong>is editing the HTML out of the question?</strong> Otherwise, you may simply introduce new classes, and apply your styles to them</p> <pre><code>#finche-node-form .width100-text-fields { width: 100px; } </code></pre> <p>(That's a terrible class name, but you get the idea)</p>
    singulars
    1. This table or related slice is empty.
    1. POCompress variable css-selectors
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDavid Hedlund
    1. USDavid Hedlund
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCompress variable css-selectors
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks for your extensive answer. Would you like me to post my entire CSS selectors?
      singulars
      1. PO
      1. USMichiel
    2. COIs that not all? Then I don't know if I dare say yes :D More than anything, I think it would be helpful if you *described* what you wanted to achieve. There's no single thing we can say will always be redundant.
      singulars
      1. PO
      1. USDavid Hedlund
    3. COOk, you asked for it :-)
      singulars
      1. PO
      1. USMichiel
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload