ID's and Classes

Hi all,

I have been reviewing CSS code, and I’d like to ask about some ID and class syntaxis.
I have understood how to use ID’s ans Classes individually, my question points when CSS sentences have more:
Here some CSS sentences I’d like to understand:
1.-
p#ID

2.-
#ID p

3.-
#ID .class

Thanks a lot!!

Basic knowledge: ID are UNIQUE, and only be used ONCE in an HTML document. They hold a lot of specificity, and tend so one should take care when using an ID even if you KNOW it’s used once ( in other words, you can make a class that you use only in once in the html element, and not have wight of the rules be so heavy, specificity wise. by contrast Classes can be used multiple times.

As to your Qs

1)p#ID this targets only a P tag WITH the ID , eg <p id=“ID”> but not <div id=“ID”> or <ul id=“ID”>. If you KNOW for certain that #ID will only be applied to a P tag or don’t need the extra weight to the rule ( and you shouldn’t, when using an ID!) then you could just simply use #ID. However your style sheet may apply sitewise and the ID may be used on a P on one page and a UL in another, which may be the reason why you are seeing this.

note: you can similarly do: p.class

2)#ID p targets all Ps that are DESCENDANTS ( inside of) the element with the id of “ID”. <div id=“ID”><p>

  1. Similar to the previous explanation, #ID .class targets all elements with class "class"that are DESCENDANTS ( inside of) the element with the id of “ID”. <div id=“ID”><ul class=“class”>

hope that helps

Hi,

Thanks a lot for your answer!! I will take a look to the theory related to descendants.

One last question. What dooes this syntaxis mean?
#ID li.class

Does it target all descendants li elements within #ID with class “class”?
<div id=“ID”><li class=“class”>

Thanks once again!!

Yes that’s correct :slight_smile:

Thanks a lot!!

And can I also mix these syntaxis?

I mean:
1.- define a class “class”
.class {…}

2.- and then define specific features for li
li.class {…}

Then, when I use <p class=“class”>, applies .class definitions, and when I use <li class=“class”> applies .class plus li.class definitions?

What I am looking is to have a base definition and then add specific features for some tags.

Thanks!!!

Yup, CSS is about mixing and matching. :slight_smile:
Again, remember to keep track of your specificity. That is: .parent li.class{style1} .parent ul .class{style2;} … you might figure that style1 will be applied but in reality the later one of the two rules will be applied, because they both have the same specificity. 10+1+10 (where ID=100s, classes=10, and tags=1).

What I am looking is to have a base definition and then add specific features for some tags.
yup
and thats why that works
since .class is LESS SPECIFIC than p.class. so in another words. All tags with the class of ‘class’ will have attributes from .class{} but only P with a class of class will ADDITIONALLY get p.class{)

Great!!

Let’s say I want to have pictures in different pages with some slight changes like position (left or right) and width.
Today, I have a class definition for each of them, even when most of the features are the same.
According to what I have understood, I should now:
1.- create a class with all common features
2.- create one img.class for each picture including its particular features only, and not repeating all common features

Having something like:
<div id=“ID”>
<p class=“images”>
<img class=“image1” src=“…/images/image1.jpg” width=“100%”>
<img class=“image2” src=“…/images/image2.jpg” width=“100%”>

And so on.

Is it correct?

Thanks a lot!!!

Yes, you got it. Also, you don’t need "width=100% " in the IMG tag, you can put that on your CSS.

Thanks a lot!!!