Hello, Thanks for your help with this...
Am I right in thinking that .widget input {} - references all INPUT
elements within another element that have the class "widget" ?
How come you've put .widget button {} ? Why button ? I'm guessing
there's a better way of me doing something?
Am I right in thinking elements in the DOM can and should be
referenced by thinking about them in an OO way? And when creating
elements and elements within elements, they too should be thought
about in a similar way that objects are defined?
Cheers and thank again for your help!! I appreciate it!
N
On Nov 10, 4:28 pm, Devon <[EMAIL PROTECTED]> wrote:
> The id attribute (ID="T01") translates to "#T01" in CSS.
> Note: ids and classes must begin with a letter. IDs must be unique
> within a document.
> So,
> div {...} - Applies to all divs
> .foo {...} - Applies to anything with class="foo"
> #t01 {...} - Applies to the element identified by id="t01"
> div.foo {...} - Applies to all div elements with a class of foo
> div#t01 {...} - Applies to the element identified by t01, but only if
> it is a div. If t01 identifies any other element, this rule is
> ignored.
> div.foo#t01 {...} - Applies to the element identified by t01, but only
> if it is a div and only is it has a class of foo. If t01 identifies
> any other element, or the element does not have foo as a class, this
> rule is ignored.
> .foo#t0 {...} - Applies to the element identified by t01, but only is
> it has a class of foo.
>
> Personally, I would be inclined to write it as:
> <div class="inputWidgit" id="t01">
> <input ...>
> <button ...>
> <span class="tag" ...>
> </div>
>
> These can them be annotated through CSS as:
> .widgit {...} - Style the div itself
> .widgit input {...} - Style the input tag
> .widgit button {...} - Style the button
> .widgit span {...} - Style the span
> or
> .widgit .tag{...} - Style the element with .tag inside the element
> with .widgit
>
> That lets you style all the elements with 4 rules. Then, if you need
> to do something specific with, say element t01, you can simply write:
>
> #t01 {...} - Style the element with id="t01"
> #t01 input {...} - Style the input tag inside the element with
> id="t01"
> #t01 button {...} - Style the button inside the element with id="t01"
> #t01 span {...} - Style the span inside the element with id="t01"
> or
> #t01 .tag{...} - Style the element with .tag inside the element with
> id="t01"
>
> dcm
>
> On Nov 8, 11:16 am, nmiddleweek <[EMAIL PROTECTED]> wrote:
>
> > Hello,
>
> > New here so thanks in advance for everyone's help :)
>
> > I've got this page as an example:http://www.getdiverted.com/test/test.html
>
> > It has a table grid and within each TD there are 3 main objects with
> > DIV containing them. They all have similar ID's.
>
> > * div_cWeb_TSW_Day01
> > * cWeb_TSW_Day01
> > * but_cWeb_TSW_Day01
> > * tag_cWeb_TSW_Day01
>
> > I've got two questions really:
>
> > 1). Is there a better way to organise my naming conventions? I've been
> > told on a jQuery forum I can apply a class to the group of objects
> > such as CLASS="cWeb_TSW_Day" and use ID to specify the individual
> > groups ID="01".
>
> > But how do I include the div_, but_ and tag_ bits. Should they go into
> > the CLASS name?
>
> > 2). I've seen on w3schools that a style called "p.uppercase" will
> > apply it's settings to the P elements with a class called uppercase...
> > Is there a way to take the extra step and change the style name to
> > something like p.uppercase.01 so that it applies it's settings to P
> > elements that have a CLASS=uppercase and ID=01 ?
>
> > Thanks,
> > Nick
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
