How to change text color of element using CSS?

Question

This is the HTML file I am working with. I tried to make the part that I am working on bold but it wouldn't work so I will just tell you, it's the line item with the class "right" that is about halfway down. If you notice, there is text that says "COMPLETE TASK" which is inside of that line item, and also an "a" reference tag. Basically, it works as a clickable item when running the application, and the color of the text by default seems to be white. I have to change the color of that text, and I am struggling to get it to work. What I tried previously was:

li.right a {
color: blue;
}

That did nothing. Any ideas?

<html>
<head>
    <title>To Do List | Pro Web Apps</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link rel="stylesheet" media="screen" href="css/proui.css" />
    <link rel="stylesheet" media="screen" href="todolist.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/prowebapps.js"></script>
	<script type="text/javascript" src="todolist.js"></script>
</head>
<body>
	<ul id="menu">
	</ul>
	<div id="main" class="view">
		<h1>Chris Hughes To Do List</h1>
		<div class="task" style="display: none;">
			<h3>Task: <span class="task-name"></span></h3>
			<p class="task-description"></p>
			<p class="task-due">
				<label>DUE IN:</label>
				<span class="task-daysleft"></span>
			</p>
			<ul class="task-actions">
				<li class="right"><a href="#" class="task-complete">COMPLETE TASK</a></li>
				<li><a href="#" class="task-start">START WORKING</a></li>
			</ul>
		</div>
		<ul class="buttons">
			<li><a class="changeview" href="#alltasks">Show All Tasks</a></li>
			<li><a class="changeview" href="#add">Add New</a></li>
		</ul>
	</div>
	<div id="alltasks" class="view">
		<h1 class="fancy">Chris Hughes All Tasks</h1>
		<ul id="tasklist">
		</ul>
	</div>
	<div id="add" class="view">
	    <h1 class="fancy">Chris Hughes Create Task</h1>
		<div id="errors"></div>
	    <form id="taskentry">
	    <ul>
	        <li><input type="text" minlength="2" class="required" name="task[name]" id="taskname" placeholder="Task Name" value=""/></li>
	        <li>
	            <textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
	        </li>
	        <li><input type="text" class="required date" name="task[due]" id="taskdue" placeholder="Task Due" value="" /></li>
	        <li class="naked"><input type="submit" name="Save" /></li>
	    </ul>
	    </form>
	</div>
</body>
</html>

There must be other CSS overriding yours. Use your browsers developer tools to inspect the element styles. developers.google.com/web/tools/chrome-devtools/css — Turnip
– Turnip, Commented Mar 26, 2018 at 15:51

Anfuca · Accepted Answer · 2018-03-26 15:51:25Z

2

Try this selector:

.task-actions li.right a.task-complete {
  color: blue;
}

answered Mar 26, 2018 at 15:51

Anfuca

1,3291 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toph Hughes Over a year ago

That worked like magic. I figured that it had something to do with how deep down my reference was to that element, but since this is premade code that I am simply editing, it was a bit confusing to see where the parent tree has to start for that. Thank you.

Wordica · Accepted Answer · 2018-03-26 15:55:06Z

0

Try to do not use !important but find where color is overwritten. Open Your Chrome console and check where color:blue is overwritten for this element.

... or put You script on bottom of all CSS ( but this is not good solution )

answered Mar 26, 2018 at 15:55

Wordica

2,6033 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to change text color of element using CSS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related