Css Div

Posted on 2012-09-15
Last Modified: 2012-09-15
When in this case "panel" in the css  style comes before a:hover and a:visited:hover, it mean that is a format for only what is inside the div "panel"?

<div class="panel">
          <h3>Sliding Panel</h3>
          <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>

.panel a:hover, .panel a:visited:hover
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
Question by:rflorencio
    LVL 25

    Expert Comment

    no. this css selector applies to all hovered links in all elements that have the panel class wether visited or not

    look for "css selectors" in google, and preferably use the W3C site
    LVL 38

    Accepted Solution

    The answer is yes. Only the anchors that are inside the element with class="panel" are affected. Of course, the syntax you presented in your post will not work. It should be:

    .panel a:hover, .panel a:visited:hover {
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;

    Maybe that's just a typo on the post however.
    LVL 25

    Assisted Solution

    yup, i kinda misread the question so the answer was yes indeed
    nice catch for the "{" as well

    to make it clear, the css does apply to what was stated above.

    here is a small quick-and-dirty reference

    , are used as separators between alternative selectors
    _ (spaces) are used to symbolize that the element at their right should be nested somewhere under the element at the left
    > is the same but the element at the right should be a direct child of the element et the left

    something selects all elements named something
    .something  selects all elements that have the something class
    #something selects the element that has the something id
    you can use combinations such as div.myclass

    happy coding

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now