Question regarding CSS selectors

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Jun 20, 2016.

0
Page 1 of 2
  1. #1
    I want to select the p tag. If I use a css selector h3 + p will it select the tag even if the tag in inside a div element?

    example
    <div>
<h3></h3>
<p></p>
</div>
    Code (markup):
    A few CSS selectors that I'm learning.

    h3 em {
*Selects all em tags inside h3 tags.
}
h3 + p  {
*Selects the first p tag after a h3 tag.
}
a[title] {
*Selects all a tags that contain a title attribute.
}
a[title="Click Here"] {
*Select exact match attribute with exact value.
}
a[title*="here"] {
*Select tag with 'here' in no particular order.
}
    Code (markup):
    I am unable to select elements inside a div for some reason. I haven't learned CSS with DIV yet. Maybe I should just wait till I'm up to that in the book I'm reading.
     
    Last edited by a moderator: Jun 20, 2016
    Web_Dev_Chris, Jun 20, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I'm not at all sure about this book you are working through - seems very long winded.

    Selecting elements within a div is easy. You've shown how with the h3 em example - although I wouldn't be coding an em inside a heading, but...

    lets say you had some markup like this

    <div id='mytable'>
<div>
<div>stuff</div>
<div>more stuff</div>
</div>
<div>
<div>123</div>
<div>456</div>
</div>
</div>
    Code (markup):
    You can style that up with this kind of thing
    <style type='text/css'>
.mytable {
   display: table;
}
.mytable div {
   display: table-row;
}
.mytable div div {
   display: table-cell; 
}
</style>
    Code (markup):
    Now, that might not be what you want to do and it might be better to have an id or two on critical table cells but it will work and demonstrates how you can style up something within your div.
     
    sarahk, Jun 20, 2016 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Where did you learn them from? You should always start with the very basic. Those things aren't basics. Even the experienced one may get confused.

    You can't select h3 + p, because the <p> tag is not a child of <h3>.

    And <h3><p>Blah Blah</p></h3> is not valid.

    If you just want to select the <p> tag then it should be just p { display: block; }, or something like this.

    Edited: the plus sign (adjacent selector) is complicated: https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
    Avoid it at all cost.
     
    Last edited: Jun 20, 2016
    ketting00, Jun 20, 2016 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #4
    The h
    The h3 + p selects the first p paragraph after a h3 so <h3>Not selected.</h3><p>Selected.</p> not inside. The one without the plus selects a tag within a tag.

    I was trying to select an element in the div example.
    <div id="body-content">
    <h2>Hello</h2>
    <p>Very long paragraph.</p>
    </div>

    But I was unable to select the p tag uniquely. If I do P {color:blue;} then all P tags will be selected. I'm trying to use the advance selector so I avoid more code mess. I could just add a class="paragraph" attribute and use .paragraph ect... but I trying to use the advance selector to avoid that.

    If you know what I mean.

    :/
     
    Web_Dev_Chris, Jun 20, 2016 IP
  5. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #5
    That's a good example of what I'm trying to do. Thanks for that.
     
    Web_Dev_Chris, Jun 20, 2016 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #6
    Why don't just give the tag you want to select the ID or class name. Why make it complicated.

    Are you sure something like this works on all browsers:
    
<html><head>
    <title>Test</title>
<style>
    h2 + p {
            color: yellow;
    }
</style>

</head><body>

    <div id="body-content">
        <h2>Hello</h2>
        <p>Very long paragraph.</p>
    </div>

</body></html>
    Code (markup):
    And why mine works on Chrome?
    What if your CSS grows larger beyond 1000 lines.
     
    ketting00, Jun 20, 2016 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Um, the + is a sibling selector, not child which is >

    g
     
    kk5st, Jun 20, 2016 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Thanks gary for corrected me.
     
    ketting00, Jun 20, 2016 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #9
    Because you don't always have control over the html that gets output, but you may have control over the css

    Take vBulletin as an example

    The forum software generates the html that is the forum and it puts in ids and classes where they think it will be helpful - but (last time I had to do anything) might miss some of the elements you want to style up. There's an amazing engine within vBulletin which lets you make template changes but there will still be things you can't get to.

    You could find the appropriate script and change that
    but then you are screwed when you go to upgrade because you have to find your notes on which scripts you've changed and find the new version's equivalent - hopefully with the same name.

    Or you could get crafty and create a css rule based on an id you know will be there and step down to the element you want to style.

    WordPress and Joomla will have similar things as will any other pre-packaged script that generates html. They will have templates and plugins that give you some control but not all.
    If you want upgrades to be easy you'll find ways to style that don't require changing the source scripts.
     
    sarahk, Jun 20, 2016 IP
  10. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #10
    ketting00 just proved that its working fine. It could just be how I am linking the .css into the head of the HTML code.

    I add this under the charset <link rel="stylesheet" href="style.css"/> than create style.css to add the code.

    Does that look right?

    Regards,
    Chris
     
    Web_Dev_Chris, Jun 20, 2016 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #11
    I always use links

    href='/styles/style.css'

    which tell the browser to go to the root folder and work out to the file. It stops little screw ups that happen from time to time.
     
    sarahk, Jun 20, 2016 IP
  12. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #12
    This is what I mean.

    Look at this example:

    <!DOCTYPE html>
<html lang="en-US"/>
<head>
<meta charset="UTF-8"/>
<style>
body {
  background-color:yellow;
}

.box  {
  background-color:lightblue;
  width:500px;
  height:200px;

}

h1 + p {
  font-family:verdana;
  font-size:large;
}
</style>
<title>Random</title>
</head>
<body>
<div class="box">
<h1>Random</h1>
<p>Random, Rodom</p>
</div>

</body>
</html>
    HTML:
    I am unable to select P and alter it inside the div?? It's not working for me?
     
    Web_Dev_Chris, Jun 20, 2016 IP
  13. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #13
    why not try

    div.box p { color: red; }
    Code (markup):
    upload_2016-6-21_17-22-19.png

    Are you familiar with your browser's inspect tool?
    It can be quite useful for getting the selector name.
     
    sarahk, Jun 20, 2016 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #14
    H3 + P really isn't what you should be doing, as first the adjacent sibling selector lacks legacy browser support, and look at how you worded it...

    You want "all P inside the DIV" you should target all children of the DIV, NOT the siblings of the H3.

    So the correct selector would be ".box p" since a space means "all children of" -- so:

    
.box p {
  font-family:verdana;
  font-size:large;
}
    Code (markup):
    Would target all P inside .box -- just as ".box h1" would target all H1 inside .box (not that you should have more than one h1 on a page, I'm just saying)

    NOT that you should use the named font sizes as they are unreliable and inconsistent across browsers, and if you're going to use a goofy nonstandard font, you should have a full font family stack backing it up for what to use when that font is unavailable.
     
    deathshadow, Jun 20, 2016 IP
  15. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #15
    What if I have two paragraphs in .box and I want to target the second one without altering the first?

    Would it be .box p + p
     
    Web_Dev_Chris, Jun 20, 2016 IP
  16. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #16
    Or would I just add a class?
     
    Web_Dev_Chris, Jun 20, 2016 IP
  17. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #17
    I wouldn't unless there is a good reason for it.
    Kinda hard to tell from your examples

    Lets say you work on a site
    leave the company
    new guy gets brought in

    if he's looking through the css and sees

    .widget {}
    .widget p {}

    he's going to know that the two styles are linked and relate to a particular type of content

    if he sees

    .widget{}
    .makethispurple {}

    he's not going to know that they're used together

    while your sites might be your own, 6 months down the track when you revisit your code you may feel like you are looking at code for the first time :)
     
    sarahk, Jun 20, 2016 IP
    ketting00 likes this.
  18. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #18
    I guess there is really no need. If so then it might be helpful to leave /*Comments*/

    Anyway, I'm thinking too much LOL. I need to focus I learning and practicing the properties.
     
    Web_Dev_Chris, Jun 20, 2016 IP
  19. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #19
    Sarah is absolutely right.

    Keep everything simple and related. When you want to add scripts (PHP or JavaScript) you wouldn't want to bang your head against a wall.

    Static HTML page wouldn't take you far.
     
    Last edited: Jun 20, 2016
    ketting00, Jun 20, 2016 IP
  20. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #20
    Yeah, you could do that, but it would also select the third, fourth p and so on as each is also the first sibling of a prior p.

    You may want to look at nth of type attribute, but it lacks support in older browsers.

    Actually you shouldn't be looking at any of these more complex selectors until you are proficient with the more straight forward selectors. Don't be in a rush to look 'cool' with your coding. You might be amazed at how seldom your really need the fancy stuff. When you do, look it up to get the details.

    g
     
    Last edited: Jun 20, 2016
    kk5st, Jun 20, 2016 IP
Page 1 of 2