Jump to content

Nameable CSS Selectors

Recommended Posts

This question is specific to named CSS selectors. There is probably an obvious answer to this question, so I apologize ahead of time. If I wanted to apply a property to a bunch elements I would use a class; could I also use an id to give individual properties to any of those elements? Basically, can a single element have a class and an id? Can there be multiple classes? If so, is this proper html to do it this way, for all the main doctypes?I'm just confused, because I don't think I've ever seen any examples whilst learning, in which an element has a class and an id. Are there any other methods for selecting name elements with CSS (that are compatible with all main browsers), other than "class", "id", and "title"? Any help would be appreciated.

Link to post
Share on other sites

On any given page, you can give the same class to multiple elements, but you can only give an id to 1 element per page. For example, if you have a couple of <div>'s which are identical in every way (positioning,colors,styles and you want it that way), give them both the same class. I generally use ID's for Javascript purposes or to identify a unique element on the page which has it's own style. You can identify elements in a number of ways. For example let's say you have this HTML:

<div id="head"><img src="logo.jpg" alt="Logo" /></div>

There is only one image within that <div> so you could target it a number of ways in your CSS:

#head img{	width: 100%;	height: 100%;}

This selects any image which is inside the #head div. You can also select only the images which are direct children of your #head div (any images which are directly inside the #head div for example if we put another div inside the #head div, then put an image in that div, that image would not be affected by the code below because it's not a direct child of the #head div, it's a direct child of the nested div). Notice the use of the greater than sign '>'

#head > img{	width: 100%;	height: 100%;}

You can also use first-child to select only the very first img child of the #head div. Let's say you have 2 images inside the #head div but you only want to apply styles to the first one of those, without giving an ID. You can use:

#head img:first-child{	width: 100%;	height: 100%;}

This applies these styles to only the very first img tag. I hope this gives you further insight into different ways to style your elements. Kind regards, Labtec.

Edited by Labtec
Link to post
Share on other sites

Thank you for responding. However, I don't think this answers my questions. I am familar with this way of selecting elements, but I don't think it would work for what I have set up. I need to give elements on multiple html pages the same properties (I used a class to do this). I also need to select some of these elements individually; I would normally use the method of selecting children of these elements. In this case, I have all the CSS in one file (It was easier to set it up this way, because the pages have very similar structures). With that in mind, selecting a child of an element that is shared on multiple pages will not work, when I'm trying to select that element specific to one of those pages. All of this leads me to the conclusion that if a single element can have a class and an id (at the same time), then I shouldn't have any problems.I have been selecting some elements with a class and a title (at the same time). It seems to work fine, but I don't know if I'm going to run into trouble doing this. If everything works out, I'd like to remove the titles and replace them with ids.Additionally: "[Y]ou can only give an id to 1 element per page." Does this mean you can use the same id name for one element on multiple pages?

Link to post
Share on other sites

Yes you can use the same id ref on multiple page, but in most cases they will use the same styling.Yes you can use class with id ref, but the matching styling used for id will have precedence over the same styling used in class. example

#testID {color: black; }#testID .testClass {color: red; width: 600px; min-height:600px;}.testClass { width: 800px; min-height:800px; color: #ccc; border:1px solid navy; margin: 0 auto;}

<div id="testID" class="testClass"><p>some text in id container, that has class for grey text, but id has precedence so black is still applied</p><div class="testClass"><p>some text in id container child div with class testClass, the id has precedence, and now the child class attached to it (#testID .testClass) is given precedence so color red is applied</p></div> </div><hr /><div class="testClass"><p>Some text in testClass, and has no id precedence to overwrite it styling so it remains grey</p></div>

if you remove color: black; from declaration, the class will take over and change it to grey in <div id="testID" class="testClass">but not<div class="testClass">as it is still a child of above and still using this rule#testID .testClass {color: red; width: 600px; min-height:600px;}

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

Is there any particular reason that it isn't popular to do things in this way? I don't think I've ever seen any CSS code that included an element having a class and an id (at the same time).

Link to post
Share on other sites

If you want to use the same id attribute for an element, or different elements on different pages, you can give the body tag it's own unique id: For your home/index page:

<body id="index">  <div id="some-id">...</div></body>

For another page with an id of example:

<body id="example">   <div id="some-id">...</div></body>

Then in your CSS:

body#index div#some-id {property: value; /*this will affect a div with the id of "some-id" on the page with a body id of "index"*/} body#example div#some-id {property: value; /*this will affect the div with the id of "some-id" on the page with a body id of "example"*/}

You can also use multiple classes on an element like this: HTML:

<div class="class1 class2 class3">...</div>


.class1 {background-color: #eee;}.class2 {padding: 18px;}.class3 {border: solid 3px #777;}

The above results in a div with a background color of "#eee" with 18px padding on all sides with a solid, 3px wide #777 colored border on all sides; from three separate classes. Or, slightly more realistically...

this is <span class="red strike">an error</span> a correction.

.red {color: #ff0000;}.strike {text-decoration: line-through;}

Is that what you were looking for? :)

Edited by Coaxsist
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...