HTML - CSS - JS puzzle

[Richard Langner]

A puzzle for the new year.

In CSS there are two ways I can create a style to float text right.

A class (dot)
<style>
    .float_right{
        float:right;
    }
</style>

An id (hash)
<style>
    #float_right{
        float:right;
    }
</style>

In usage (class)
<div><a href='#p' onclick='c(this)'>SHHWifi</a>
    <div class = "float_right">-10dB</div>
</div>

In usage (id)
<div><a href='#p' onclick='c(this)'>SHHWifi</a>
    <div id= "float_right">-10dB</div>
</div>

Both have the same effect to position text to the right.
However I previously understood that an id was to identify (say) a div
so javascript can find it, like this -

<div id='wifi' style='display:none;' class="backColourPaleBlue" >

In this case how would I know whether 'wifi' was a style or an id? I may
have intended it to be a unique id, but someone may have previously
defined it as as a style.

There must be a difference, Can anyone shed light on this for me?

Richard
E&OE

[nop head]

Not an expert, but I think you can apply a style to an id or a class. You can only have one element with the id, it identifies that element. A class can apply to multiple elements. So wifi is an id that identifies that particular div. There can be a style that applies to the id but normally they apply to classes. It would be odd, I think for somebody else's style sheet to apply styles to id's that it didn't define.

--
You received this message because you are subscribed to the Google Groups "Sheffield Hackspace" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sheffield-hardware-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/fd4cab89-7175-9a05-66a2-a2a5bc371a4e%40gmail.com.

[Stephen Joseph]

I think that's right about the use of class and id. Previous definitions are not so much a problem because the C in CSS stands for Cascading: your definition will override any previous one. I find I have to try out styling and use Firefox to inspect the results to track down what is happening, and even then it can be hard to persuade it to reload the style sheet as well as the page. You can compound the selectors too, so

#main .concert img{

    display:inline;
    border: none;

}

applies the style to img elements in elements of class concert in elements with id main.

[Jonathan Michaels]

Hi Richard, and happy New Year.

For what it’s worth, this is my take on the question of ID and class.

Both class and ID are treated by CSS as separate possible selectors, to which styling can be applied.  HTML elements can have one or more classes and/or a single ID, which are treated separately.  In theory you could have both a class and ID with the same name.  These would be considered separate entities by the CSS so #wifi would be different to .wifi, although that would make for confusing code!  In fact you can combine selectors so you could have a CSS style for “#myID.myClass” which would apply to an element that had both the ID “myID" and the class “myClass", or “#myID .myClass”, which would apply to all elements of “myClass", which are descendents of the element with the ID “myID".  

If both class and ID have contradictory CSS styles applied, then there are a set of precedence rules for which ones are applied – ID takes precedence over class.

The main difference in usage is that classes are intended for elements that may appear more than once on a page, whereas ID’s are intended to be unique.  Of course, you can use a class just for a single item, but using duplicate IDs on the same page may cause unpredictable results and confusion if you want to refer to the element in a script.

Hope this helps clarify,

Jonathan

To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/23c08fdc-c4f6-4241-b52b-f0af0bb7a879n%40googlegroups.com.

[Richard Langner]

Thanks for the replies, and a Happy New Year to All.

I use Firefox normally and I am aware browsers vary. As I understand it, the # ID only refers to ONE element on the page (single use). However the code I used had loads of lines using the same # ID style, so perhaps not conforming to the expected specification.
That made me wonder why not just make them all classes.

Javascript will uniquely identify this line of code

<div id= left_column> Text here </div>

whereas css would treat it as a style

<style>

#left_column{ float:left;}

</style>

I am using both javascript and css, so this could go horribly wrong if I were initially unaware of the contents of the (borrowed) css file.

---

On 01/01/2022 14:14, Jonathan Michaels wrote:

Hi Richard, and happy New Year.

For what it’s worth, this is my take on the question of ID and class.

Both class and ID are treated by CSS as separate possible selectors, to which styling can be applied.  HTML elements can have one or more classes and/or a single ID, which are treated separately.  In theory you could have both a class and ID with the same name.  These would be considered separate entities by the CSS so #wifi would be different to .wifi, although that would make for confusing code!  In fact you can combine selectors so you could have a CSS style for “#myID.myClass” which would apply to an element that had both the ID “myID" and the class “myClass", or “#myID .myClass”, which would apply to all elements of “myClass", which are descendents of the element with the ID “myID".  

If both class and ID have contradictory CSS styles applied, then there are a set of precedence rules for which ones are applied – ID takes precedence over class.

The main difference in usage is that classes are intended for elements that may appear more than once on a page, whereas ID’s are intended to be unique.  Of course, you can use a class just for a single item, but using duplicate IDs on the same page may cause unpredictable results and confusion if you want to refer to the element in a script.

Hope this helps clarify,

Jonathan

On 1 Jan 2022, at 12:13, Stephen Joseph <steve.jo...@gmail.com> wrote:

I think that's right about the use of class and id. Previous definitions are not so much a problem because the C in CSS stands for Cascading: your definition will override any previous one. I find I have to try out styling and use Firefox to inspect the results to track down what is happening, and even then it can be hard to persuade it to reload the style sheet as well as the page. You can compound the selectors too, so

#main .concert img{

    display:inline;
    border: none;

}

applies the style to img elements in elements of class concert in elements with id main.

To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/F2F5C907-5867-4B1D-B9E5-4E42CB178DFE%40sheffield.ac.uk.

[Jonathan Michaels]

Hi Richard,

A couple more thoughts on this. 

ID’s should be unique on a page – most browsers are fairly forgiving, so for most purposes you may get away with re-using an ID, but Javascript commands like “getElementById” may have unpredictable results depending on how the page is rendered.  It's worth trying any page on as many browsers and devices as possible, I always find lots of issues due to how differently things can be rendered under different circumstances.

If you want to use Javascript to format multiple HTML elements then you can use a class, get the element by class name with JS and apply a style.  Alternatively, you can define a style for the class in a <style> element in the header and use Javascript to change the innerHTML of this element to alter the style for the whole class.  Because you’re applying an inline or internal style, these will take precedence over any style definitions on an external style sheet, so this should be OK, even if it conflicts with a style in the external css file.

Good luck

Jonathan

 

To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/73c1f1a7-c5a2-2b9d-4424-8cc0eac9d446%40gmail.com.