1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What is ID Selector in CSS ?

Discussion in 'HTML & Website Design' started by alendonald, Jul 3, 2013.

  1. #1
    Hi,
    I m new user in CSS. I was reading about CSS than i see ID selector but i can't understand its meaning, So tell me about ID selector.
    alendonald, Jul 3, 2013 IP
  2. malky66

    malky66 Prominent Member

    Messages:
    1,713
    Likes Received:
    1,050
    Best Answers:
    27
    Trophy Points:
    390
    #2
    malky66, Jul 3, 2013 IP
    ryan_uk and FreeFun4Every1 like this.
  3. abhijitnumber1

    abhijitnumber1 Member

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Id & Class are two type of selector.
    Id Selector is used to specify a style for a single, unique element & it use the html attribute "id"

    id selector is like your id card, id card show information about you & ID SELECTOR show information about a HTML element (color of a text, tex-align, etc).

    suppose you want to start two paragraph Like
    HTML:
    1. <p>this is a Paragraph1</p>
    &
    HTML:
    1. <p>this is a Paragraph2</p>


    and you want to color the first paragraph as red & the second paragraph as green.

    this is the css part

    #paragraph1:{color:red;}
    #paragraph2:{color:green:} (id selector is define with #)

    html part

    <p id="paragraph1">this is a paragraph1</p>
    <p id="paragraph2">this is a paragraph1</p>

    when some one visit your site, the browser read your code, when it come to <p id="paragraph1">this is a paragraph1</p> this line, it get the id form <p id="paragraph1">, and find information about id paragraph1, in css. then show this paragraph as red. (you can't use same id twice in a single page, Like two person never have same id card).
    abhijitnumber1, Jul 3, 2013 IP
    ryan_uk and FreeFun4Every1 like this.
  4. alendonald

    alendonald Greenhorn

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #4
    thanks for suggest me...
    alendonald, Jul 7, 2013 IP
  5. abhijitnumber1

    abhijitnumber1 Member

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    38
    #5
    Happy to help
    abhijitnumber1, Jul 8, 2013 IP
  6. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #6
    Just to re-emphasize what abhijitnumber1 put in bold, be VERY sure to remember ID's should be unique -- only use them once in the markup.

    More importantly though, ID's are NOT just for CSS! As unique identifiers they exist for directly targeting a single element from a variety of things:

    1) Hash links. You know those #something at the end of a URL? Those will scroll down to an ID. Used to be you used the NAME attribute on anchors for this, but really NAME's job is supposed to be the name of things sent to the server and NOT for client-side processing.

    For this reason I like to use ID's around unique subsections of a page, so if need be I can direct link to them. #content, #top, #footer, #mainMenu, etc, etc...

    2) Targeting an element in client-side scripting. See javascript's "getElementById" for more.

    3) as the target of a LABEL element's FOR attribute -- typically an INPUT, TEXTAREA or SELECT.

    For example:
    Code (Text):
    1. <label for="loginUsername">Username:</label>
    2. <input type="text" name="username" id="loginUsername" />'
    again, the name attribute is what's sent server side (for example $_POST['username'] in PHP), the ID is what the LABEL points at. One nice side effect of using FOR on a LABEL, if you click the label it's treated the same as if you clicked the element.

    Very handy with things like radio-buttons.

    Code (Text):
    1. <input type="radio" name="favoriteUHF" id="favoriteUHF_WFXT" value="WFXT" />
    2. <label for="favoriteUHF_WFXT">WFXT 25</label>
    3. <br />
    4. <input type="radio" name="favoriteUHF" id="favoriteUHF_WSBK" value="WSBK" />
    5. <label for="favoriteUHF_WMUR">WSBK 38</label>
    6. <br />
    7. <input type="radio" name="favoriteUHF" id="favoriteUHF_WLVI" value="WLVI" />
    8. <label for="favoriteUHF_WLVI">WLVI 56</label>
    9. <br />
    10.  
    Each one gets a unique ID so you can target via hash, script, label, etc... but all share the same name.

    ID's for CSS, that's just a nice happy extra bit of functionality!

    Though TECHNICALLY, an ID selector is the # part. That's the "selector". Just as . is a class selector, a space is a child selector, + is a adjacent sibling selector, > is a direct child selector, etc, etc...

    See:
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

    For a good explanation of selectors.
    deathshadow, Jul 8, 2013 IP
    ryan_uk likes this.
  7. alendonald

    alendonald Greenhorn

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #7
    thanks for everyone to suggest me
    alendonald, Jul 9, 2013 IP
  8. Anjali Panwar

    Anjali Panwar Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    The id selector is used to specify a style for a single, unique element.
    The id selector uses the id attribute of the HTML element, and is defined with a "#".
    The style rule below will be applied to the element with id="para1":
    Example

    #para1
    {
    text-align:center;
    color:red;
    }
    Anjali Panwar, Jul 10, 2013 IP
  9. jackburd

    jackburd Member

    Messages:
    382
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    48
    Digital Goods:
    1
    #9
    if you're already familiar with "class" in CSS, it is similar to that.
    The only difference is it's only exclusive to an HTML tag and you can't use more than once in one web page.

    It's also more powerful than class. For example:

    Code (Text):
    1. <style>
    2. .green { color: green; }
    3. #red {color: red; }
    4. </style>
    5.  
    6. <h1 class="green" id="red">Text</h1>
    Your heading 1 above will be red

    It's also used in selecting elements in jquery/javascript
    jackburd, Jul 10, 2013 IP