StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The main reason I use ID tags is to communicate with people who are reading my code. Specifically, the ID tag makes it easy to reference whatever specific element they want to with complete peace of mind, knowing that any changes they make to it will only affect that one element.</p> <p><strong>EDIT:</strong> There is also a more technical reason to use ID tags that you may not know. I updated this post again as per <a href="https://stackoverflow.com/users/183181/vol7ron">vol7ron</a>'s <a href="https://stackoverflow.com/questions/1607839/what-are-the-reasons-to-use-the-id-attribute-for-css-purposes/1611130#comment11386704_1611130">comment</a> and some further research for historical purposes. This information can be quite enlightening for those who are new to CSS.</p> <p>The following outline illustrates exactly how the "cascading" nature of Cascading Style Sheets works. In this outline, start by comparing 2 CSS styles based on the uppermost criteria of the outline, ie "1. Winner = <strong>!important declaration</strong>." If one style is of higher priority than the other in that aspect, it wins. If they are the same in that aspect, continue down to the next criteria in until you find the differentiating factor.</p> <ol> <li>Winner = <strong>!important declaration</strong>. <ul> <li>Eg. <code>#some-element {color: blue !important;}</code> beats <code>#some-element {color: red;}</code>.</li> </ul></li> <li>Winner = <strong>Inline CSS</strong>. <ul> <li>Eg.: <ul> <li><code><div id="some-element" style="#some-element {color: yellow;}">some content</div></code>beats...</li> <li><code><style type="text/css">#some-element {color: red;}</style></code> and...</li> <li><code><link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/></code>.</li> </ul></li> </ul></li> <li>Winner = Greatest # of <strong>ID</strong> selectors. <ul> <li>Eg. <code>#some-element#id-2 {color: blue;}</code> beats <code>#some-element {color: red;}</code>.</li> </ul></li> <li>Winner = Greatest # of <strong>class</strong>, <strong>pseudo-class</strong>, and <strong>other attribute</strong> selectors. <ul> <li>Eg. <code>.some-elements.class-2 {color: blue;}</code> beats <code>.some-elements {color: red;}</code>.</li> </ul></li> <li>Winner = Greatest # of <strong>element names</strong> and <strong>pseudo-elements</strong> in the selector. <ul> <li>Eg. <code>#some-element:hover {color: blue;}</code> beats <code>#some-element {color: red;}</code>.</li> </ul></li> <li>Winner = <strong>Most recently read</strong> by the machine. <ul> <li>Eg.: <ul> <li><code><style type="text/css">#some-element {color: red;}</style></code> beats...</li> <li><code><link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/></code> because <strong>internal CSS</strong> is read after <strong>external CSS</strong>.</li> </ul></li> </ul></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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