Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS Background problemn

Saumyojit

Saumyojit

Well-Known Coder
<div id="rt"></div> this line i have written in index.html file

CSS: 
#rt {
  background-color: red;
  width:70%;
  height: 300px;
}
this part i have written in .css file .
Output is showing the right : A red background color block is showing .

NOw if i use inline css here, there is no blue background coming .
But if i write some text in between div tag then the container with background blue is showing why so ?

HTML: 
<div style="height:60%; width:50%; background:blue;">
</div>
 
Last edited by a moderator:
Sort by date Sort by votes
You are by far missing the point.
Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <style type="text/css">
           
            a:hover{
                color: green;
            }

a:link {
                color: red;
            }
        </style>
    </head>
    <body>
          
          
<a href="https://pharmeasy.in/online-medicine-order/becosules-z-strip-of-20-capsules-36990">Example</a>
       
    </body>
</html>

Why this is not working.
Just tell me a logical reason .
Don't bring in visited and other alternatives .
Did I ask for it



This reason was given by the user in So but I didn't explain it to me

"We see that both :link and :hover pseudo classes are capable to define the hover state -- So if you assign these two pseudo-classes to a particular element then the one mentioned at last in the css file wins. This is the reason we say :link will override :hover when the former is mentioned below the later"
 
Upvote 0 Downvote
Did I ask for it
Click to expand...
I did not ask to help you, so...


In your example, a:hover will only apply to visited links. To apply it to unvisited links, use a:link:hover.

Basically, if you use the pseudo class :link, then you have to define the styles for when the links has been visited and for when they have not been visited...
 
Last edited:
Upvote 0 Downvote
<style type="text/css">

a:hover
{
color:green;
}

a:visited {
color😱range;
}

</style>
<body>


<a href="https://www.geeksforgeeks.org/use-scanf-not-printf/">Example</a>

</body>
</html>

Hover doesn't not work.
Why so



A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
one guy is saying
 
Upvote 0 Downvote
The styles you posted means:
The visited links have the color orange and unvisited links have the color green when hovered.

Use 'link' (unvisited links) and 'visited' (visited links) to define the style for both visited and unvisited links.

As said ealier by Hassapiko, use the BBCode feature whenever you post code (The </> button). This is a rule of the forum.

The pseudo class :link is used to apply styles to UNVISITED links only. The pseudo class :visited is used to apply styles to VISITED links only. If you do NOT use neither 'link' or 'visited', THEN styles applied to <a> elements will apply to both visited and unvisited links.
 
Upvote 0 Downvote
LTomy said:
In your example, a:hover will only apply to visited links.
Click to expand...
I think I don't know some concept in css .
That code in post 41 I had wrote keeping in mind for styling unvisited link and what happens when mouse hovers over unvisited link only(only these two)
I don't want to style what will happen if I visit the link.
Now it seems that the code that I wrote in 41 as u mentioned "hover" will work only after once I visit the link .

Now my doubt is how the whole process of this type selectors work?
In post 41,I cannot understand When I did not bring any : visited pseudo selector in my code then why does hover work for visited link but not for unvisited.

But the below code is working as I wanted
Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <style type="text/css">
            a:link {
                color: red;
            }
            a:hover{
                color: green;
            }
        </style>
    </head>
    <body>
           <div class="foo">
            <a href="https://pharmeasy.in/online-medicine-order/becosules-z-strip-of-20-capsules-36990">Example</a>
        </div>
    </body>
</html>

So I am asking again for the 3rd time
Why placing link selector before hover works but not vice versa .(is there a rule?)
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
If you define a:link, then previously defined a:hover will be ignored for unvisited links. If you define a:visited, then previously defined a:hoverwill be ignored for visited links. If you define a:link AFTER, then it will be used by both visited and unvisited links.
 
Upvote 0 Downvote
LTomy said:
If you define a:link, then previously defined a:hover will be ignored for unvisited links. If you define a:visited, then previously defined a:hoverwill be ignored for visited links. If you define a:link AFTER, then it will be used by both visited and unvisited links.
Click to expand...
Okay you are Indeed telling me this rule
LoVe-HAte mnemonic for the order in which to specify link selectors (a:link, a:visited, a:hover, a:active).

What about this part one user tried to explain in stack.
a: link{color: red} tells the user agent to color the anchor element red in any state

The anchor element is colored red in the following states if and only if the link is unvisited,

Unvisited
hovered
Focused(Tabbed)
Active(Clicked)


a:hover {
color: red;

}
The anchor element is colored red in the following states,

hovered
Active(clicked)


CONCLUSION:We see that both :link and :hover pseudo classes are capable to define the hover state -- So if you assign these two pseudo-classes to a particular element then the one mentioned at *last in the css file wins*. This is the reason we say :link will override :hover when the former is mentioned below the later.
Click to expand...
What does the user is saying?
I think he gives a more intuitive logical explanation
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
@LTomy
HTML: 
<!DOCTYPE html>
<html>
<body>

<h1>The select required attribute</h1>

<p>The required attribute specifies that the user is required to select a value before submitting the form:</p>

<form action="/action_page.php">

  <select name="cars" id="cars" required>
    <option value=" ">None</option>  -
   
<option value="volvo">Volvo</option>

    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

the above code is the original code . When there is "None" in the dropdown box and i click on submit it shows a message "You have to select " . thats fine but


Here NONE is second in the option list
Code: 
<!DOCTYPE html>
<html>
<body>

<h1>The select required attribute</h1>

<p>The required attribute specifies that the user is required to select a value before submitting the form:</p>

<form action="/action_page.php">

  <select name="cars" id="cars" required>
    <option value="volvo">Volvo</option>


<option value=" ">None</option>  --->(Here NONE is second in the option list )
   

    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

in the second code when the option is none , the form is submitted without giving the pop up message. Why so?
 
Upvote 0 Downvote
@Saumyojit, may I suggest making separate threads for new questions? It helps to break things down rather than have everything in one.

Also, are you attempting to solve any if these problems yourself? You shouldn't be too reliant on others(especially @LTomy) to answer all of your questions, big or small. Just saying.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom